本篇大綱
本篇要解決的問題
之前一直以為,點擊按鈕後將表格轉成檔案下載,都是後端的事情,直到這幾天收到需求,問說前端有沒有可以做到後,才去研究這個部份。
結果一查,還真的有耶,可以把從 API 取回的 JSON,轉成 CSV 檔後下載。
本篇主要參考的是這篇:Javascript to csv export encoding issue
本篇會寫一個將取回的 JSON,轉成 CSV 檔後下載,並且保留原本資料的中文字。
模擬取回的資料
我們這邊來假設,從 API 取回的資料如下:
var data = [{ "項目1": "內容1-1", "項目2": "內容1-2", "項目3": "內容1-3", "項目4": 11 }, { "項目1": "內容2-1", "項目2": "內容2-2", "項目3": "內容2-3", "項目4": 12 }, { "項目1": "內容3-1", "項目2": "內容3-2", "項目3": "內容3-3", "項目4": 13 }];
接下來,我們要把資料整理成以下樣子,才能轉成 CSV 檔:
"項目1,項目2,項目3,項目4\n內容1-1,內容1-2,內容1-3,11\n內容2-1,內容2-2,內容2-3,12\n內容3-1,內容3-2,內容3-3,13"
\n
的符號代表換行,在轉成 CSV 檔後會被換到下一列。
整理資料
這一步,我們會把每一個 Object 都整理成 Array。
另外要取出所有的 Key 成為第一個 Array,這樣出來的檔案才會是表頭。
這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝
資料轉成 CSV 檔並下載
這一步就是要把上一步整理好的資料,轉成 CSV 檔並下載。
轉成 CSV 檔時,因為我們大部份用的資料是中文,如果直接轉會出現亂碼,照參考資料中寫的,必須要加入「UTF-8 BOM」編碼規則,才能讓我們的中文保持不變。
data:text/csv;charset=utf-8,%EF%BB%BF
這段就是讓 CSV 的編碼是 UTF-8 BOM。
最後我們只需要在一個按鈕點擊時執行以下即可:
buildData(data).then(data => downloadCSV(data));
完成程式碼、範例
完整的程碼碼整理在 GitHub 上:
https://github.com/letswritetw/letswrite-json-to-csv
也建立了一個 Demo 方便大家測試:
https://letswritetw.github.io/letswrite-json-to-csv/


以下是留言,但關於留言的部份必需先讓你們知道:
本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,
Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外,公開信箱是為了讓金流驗證用,
因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。
因此決定不再回覆信件,有疑問就利用留言功能囉。