用 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

隨選筆記文

Front-End

像 Medium 的漸近式圖片加載

API

GitHub API:取 Issue、Comments

Vue

Nuxt.js 一些好用的設定

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

API Front-End

WebSocket 基本介紹及使用筆記

Front-End

滿版圖片背景、影音背景

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 Commands

Google Others

Google Optimize A/B Testing 使用筆記

Bot Telegram

Telegram Bot 學習筆記 – 5:取得使用者大頭照

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

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

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

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

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

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

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

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

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