用 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
用 JavaScript 將 JSON 轉為 CSV 檔下載
Article Name
用 JavaScript 將 JSON 轉為 CSV 檔下載
Description
本篇大綱:本篇要解決的問題。模擬取回的資料。整理資料。資料轉成 CSV 檔並下載。完成程式碼、範例。本篇會寫一個將取回的 JSON,轉成 CSV 檔後下載,並且保留原本資料的中文字。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API

接氣象局 API、跨網域 AJAX 資料

Front-End

用純 CSS 寫的網頁預覽效果

Front-End

Markdown 常用語法筆記

Google Maps

Google Maps API 學習筆記 – 2:在地圖上畫個日本結界

Google Others

用 Google Cloud Platform / GCP 建 Node.js 網站

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Analytics Google

GA:啟用 Web + APP 報表

API

如何用 Postman Mock Server 快速建立 API Server

Front-End

像 Medium 的漸近式圖片加載

Google Sheets

如何用 Google Excel 當作資料庫

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.