js 导出csv文件

什么是csv文件？

百度百科的解释：

逗号分隔值文件格式

综上，该格式有3个特点：

该格式是纯文本数据格式，即字符串格式
字段间的分隔符是其它字符或字符串，最常见的是逗号或制表符
记录间以某种换行符分隔

编辑Excel文件时，当编辑完成当前单元格，想要编辑下一行紧挨着的单元格，按一下Enter键就可以。Enter键在js字符串中是用\r表示的，而各个系统对Enter键的匹配模式不太一样：

Windows系统，标准模式采用的是\r\n匹配Enter键
mac系统，用\r匹配Enter键
Linux系统，用\n匹配Enter键

所以记录间的换行分隔符应该以\r\n表示

数据转换

弄清csv格式后就要开始数据转换了。以下面列出的表头和数据为例

     // 表头
      const exportTitle = ["月份", "价格"];
      // 数据
      const exportData = [
        {
          month: "2020-07",
          price: 78,
        },
        {
          month: "2020-08",
          value: 108.8,
        },
        {
          month: "2020-09",
          value: 93.6,
        },
      ];
      //  文件名称
      const fileName = "bill.csv";

按照上述规则：字段间逗号分隔+记录间\r\n分隔，拼接字符串。

      let row = "",
        csvData = "";
      for (const title of exportTitle) {
        row += '"' + title + '",';
      }
      csvData += row + "\r\n"; // 添加换行符号
      for (const item of exportData ) {
       row = "";
       for (let key in item) {
          row += '"' + item[key] + '",';
        }
       csvData += row + "\r\n"; // 添加换行符号
     }
     if (!csvData) return;

转换后的数据格式是：

""月份","价格",
"2020-07","72.5",
"2020-08","108.8",
"2020-09","93.6",
"

csv文件下载

目前最方便快捷的方法就是使用HTML5原生的download属性实现下载，于是思路来了：创建a标签-->设置href和download属性-->移除a标签。随之问题也来了：

由于是实现本地下载，没有href：生成一个好了，神器Blob就派上用场了。
IE 不支持download属性：不怕，有msSaveBlob，还要新增一个判断浏览器的方法。

完整代码如下（IE 11以下就不考虑啦）：

      let alink = document.createElement("a");
      // 解决中文乱码的问题，标识该字节流的字节序
      let _utf = "\uFEFF";
      const bw = this.browser();
      if (bw["edge"] || !bw["ie"]) {
        // Blob IE>=10 都支持，不能作为判断依据
        if (window.Blob && window.URL && window.URL.createObjectURL) {
          // DOMStrings会被编码为UTF-8，utf-8保存的csv格式要让Excel正常打开的话，必须加入在文件最前面加入BOM(Byte order mark)
          const csvDataBlob = new Blob([_utf + csvData], {
            type: "text/csv",
          });
          //会产生一个类似 blob:http://localhost:8083/5a2d03ec-cbdf-4ea9-be0c-f837ed35a9be 这样的URL字符串, 
          //可以像使用普通 URL 那样使用它，比如用在 img.src 上。
          alink.href = URL.createObjectURL(csvDataBlob); 
        }
        document.body.appendChild(alink);
        alink.setAttribute("download", fileName);
        alink.click();
        document.body.removeChild(alink);
      } else if (bw["ie"] >= 10) {
        const csvDataBlob = new Blob([_utf + csvData], {
          type: "text/csv",
        });
        navigator.msSaveBlob(csvDataBlob, fileName);
      }

判断浏览器代码如下：

   browser() {
      let Sys = {};
      let ua = navigator.userAgent.toLowerCase();
      let s;
      (s =
        ua.indexOf("edge") !== -1
          ? (Sys.edge = "edge")
          : ua.match(/rv:([\d.]+)\) like gecko/))
        ? (Sys.ie = s[1])
        : (s = ua.match(/msie ([\d.]+)/))
        ? (Sys.ie = s[1])
        : (s = ua.match(/firefox\/([\d.]+)/))
        ? (Sys.firefox = s[1])
        : (s = ua.match(/chrome\/([\d.]+)/))
        ? (Sys.chrome = s[1])
        : (s = ua.match(/opera.([\d.]+)/))
        ? (Sys.opera = s[1])
        : (s = ua.match(/version\/([\d.]+).*safari/))
        ? (Sys.safari = s[1])
        : 0;
      return Sys;
    }

代码写完了，见证奇迹的时刻到了

对账单下载

月份明明是字符串，下载下来怎么变成自定义的日期格式了？试了好多种方法，最后发现直接加个空串更直接高效：

 row += '"' + item[key] + '",';

改成

 row += '" ' + item[key] + '",';

就ok了，完美！

对账单

拓展

Blob乱码问题：需要了解下BOM

FEFF
createObjectURL:会产生一个类似 blob:http://localhost:8083/5a2d03ec-cbdf-4ea9-be0c-f837ed35a9be 这样的URL字符串, 可以像使用普通 URL 那样使用它，比如用在img.src上。

参考

彻底理解使用JavaScript 将Json数据导出CSV文件
 blob 导出csv 用execl打开出现乱码

最后编辑于：2020.09.11 17:57:38