原生JS使用Blob导出csv文件

最近在作关于文件下载的需求：前端调用接口，而后对返回数据进行过滤、格式化，而后按表格内容拼接生成csv文件，让用户下载。

具体实现方式以下：let sourceData = {

 head: [ '时间', '成交价格', '成交数量', '手续费', '成交金额', ], data: [ {time: '2019-10-17 14:54:52', tradePrice: '30.0022.001.32 TWD', fee:'0 TWD', tradeAmount: '660.00',}, {time: '2019-10-17 14:54:36', tradePrice: '30.0089.005.34 TWD', fee:'0 TWD', tradeAmount: '2,670.00',}, {time: '2019-10-17 14:54:07', tradePrice: '21.00500.0021 TWD', fee:'0 TWD', tradeAmount: '10,500.00',}, ] } // 格式化 const data = [sourceData.head.join(',')].concat(sourceData.data.map(item => { return [ item.time, `"${item.tradePrice}"`, `"${item.fee}"`, `"${item.tradeAmount}"`, ].join(',') }))
// 建立Blob对象 传入一个合适的MIME类型 const blob = new Blob(['\ufeff' + data.join('\n')], {type: 'text/csv,charset=UTF-8'}); // 参考连接 https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
// 使用 Blob 建立一个指向类型化数组的URL
const csvUrl = URL.createObjectURL(blob); // 参考连接 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

let link = document.createElement('a'); 
link.download = `details_${new Date().getTime()}.csv`; //文件名字 
link.href = csvUrl;
// 触发下载 link.click();

 

注意事项：

1. 数据中存在 ','  逗号问题处理：将整个数据用双引号(英文格式)包裹起来，这样会显示成一个单元格。

2. 拼接后的数据如何直接下载，不须要用户在操做：动态建立a标签，并调用点击事件

3. 中文乱码解决方案：在数据前面加上字符串"\ufeff"便可