JS导出CSV大文件小技巧

实现思路

1. 使用json2csv将后台json数据转化为csv格式数据

2. 创建一个a标签，设置href和download属性

3. 触发a标签的点击事件实现下载

4. 移除a标签

相关代码：

import json2csv from 'json2csv'

exportCsv () {
    try {
    let columns = this.$refs.table.$children.filter(t => t.prop != null)
    const fields = columns.map(t => t.prop)
    const fieldNames = columns.map(t => t.label)

    var link = document.createElement("a");
    var result = json2csv({ data: data, fields: fields, fieldNames: fieldNames });
    var csvContent = "data:text/csv;charset=GBK,\uFEFF" + result;
    var encodedUri = encodeURI(csvContent);
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "my_data.csv");
    document.body.appendChild(link); // Required for FF
    link.click(); // This will download the data file named "my_data.csv".
    document.body.removeChild(link); // Required for FF
    } catch (err) {
    // Errors are thrown for bad options, or if the data is empty and no fields are provided.
    // Be sure to provide fields if it is possible that your data array will be empty.
    console.error(err);
    }
}

调用以上方法就实现了csv文件的导出，但是笔者在开发时遇到了一个小坑，当数据量较大时以上导出代码会失效，并且catch不到err,Chrome执行下载不成功：

这是因为url有最大长度限制，encodeURI是会把字符串转化为url，超出限制长度部分数据丢失导致下载失败,为此我采用创建Blob（二进制大对象）的方式来存放缓存数据，具体代码如下：

var blob = new Blob(["\ufeff" + result], {type: 'text/csv'}); //解决大文件下载失败
link.setAttribute("href", URL.createObjectURL(blob));

Chrome 执行下载成功：