最近在做關於檔案下載的需求：前端呼叫介面，然後對返回資料進行過濾、格式化，然後按表格內容拼接生成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();
 

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

注意事項：

1.資料中存在 ‘,‘ 逗號問題處理：將整個資料用雙引號(英文格式)包裹起來，這樣會顯示成一個單元格。

2. 拼接後的資料如何直接下載，不需要使用者在操作：動態建立a標籤，並呼叫點選事件

3. 中文亂碼解決方案：在資料前面加上字串"\ufeff"即可