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打开出现乱码

原著是一个有趣的人,若有侵权,请通知删除