js 导出csv文件

作者: 嘻哈章鱼小丸子 | 来源:发表于2020-09-11 17:52 被阅读0次

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

    相关文章

      网友评论

        本文标题:js 导出csv文件

        本文链接:https://www.haomeiwen.com/subject/wdueektx.html