原生JS使用Blob导出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();

genUrl(encoded, options) {
     const dataBlob = new Blob([`\ufeff${encoded}`], { type: 'text/plain;charset=utf-8' });//返回的格式
     return window.URL.createObjectURL(dataBlob);
   },

downloadByPeople(){

      this.$http.FileGet(this.pageParams).then(res => {
      const url = this.genUrl(res.data.data.workhour_csv_data, {});//{}指的是表头，res.data.data.workhour_csv_data是后台返 回来的数据
     const a = document.createElement('a');
     a.href = url;
     a.download = "工时统计文件.csv";
     a.click();
     window.URL.revokeObjectURL(url);
    });
 },