原生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"便可