用 JavaScript 將 JSON 轉為 CSV 檔下載

本篇要解決的問題

之前一直以為，點擊按鈕後將表格轉成檔案下載，都是後端的事情，直到這幾天收到需求，問說前端有沒有可以做到後，才去研究這個部份。

結果一查，還真的有耶，可以把從 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/

Summary

Article Name

用 JavaScript 將 JSON 轉為 CSV 檔下載

Description

本篇大綱：本篇要解決的問題。模擬取回的資料。整理資料。資料轉成 CSV 檔並下載。完成程式碼、範例。本篇會寫一個將取回的 JSON，轉成 CSV 檔後下載，並且保留原本資料的中文字。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png