最近在做關於文件下載的需求：前端調用接口，然后對返回數據進行過濾、格式化，然后按表格內容拼接生成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"即可