利用純JS實現(xiàn)JSON轉CSV的技巧全攻略
更新時間：2025年06月26日 08:32:25 作者：燭陰
在數(shù)據(jù)處理和導出方面,JSON 和 CSV 格式是兩個常見的角色,今天,我們將介紹如何在純 JavaScript 中,利用開源庫 @json2csv/plainjs 輕松實現(xiàn)從 JSON 轉換到 CSV,幫助你高效處理數(shù)據(jù),需要的朋友可以參考下
引言
在數(shù)據(jù)處理和導出方面，JSON 和 CSV 格式是兩個常見的角色。JSON（JavaScript Object Notation）以其良好的可讀性和靈活性被廣泛應用于數(shù)據(jù)存儲和傳輸，而CSV（Comma-Separated Values）則因其簡潔易讀、方便導入到各種表格軟件中而深受歡迎。今天，我們將介紹如何在純 JavaScript 中，利用開源庫 @json2csv/plainjs 輕松實現(xiàn)從 JSON 轉換到 CSV，幫助你高效處理數(shù)據(jù)。
一、什么是 @json2csv/plainjs？
@json2csv/plainjs 是 json2csv 的一種輕量版（純原生 JS 實現(xiàn)），無需依賴任何第三方庫或環(huán)境（比如 Node.js 特定模塊），非常適合瀏覽器或純 JS 環(huán)境下使用。
主要功能：
- 將 JSON 對象或數(shù)組轉換成 CSV 格式
- 支持自定義字段和格式
- 簡單易用，無復雜配置
二、基礎用法：將簡單 JSON 轉為 CSV
示例：轉換一組用戶數(shù)據(jù)
import { Parser } from '@json2csv/plainjs';
// 示例數(shù)據(jù)
const myData = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Jane', age: 25, city: 'Los Angeles' },
{ name: 'Doe', age: 35, city: 'Chicago' }
];
// 基本轉換示例
try {
const basicOpts = {};
const basicParser = new Parser(basicOpts);
const basicCsv = basicParser.parse(myData);
console.log('基本轉換結果:');
console.log(basicCsv);
} catch (err) {
console.error('基本轉換出錯:', err);
}
輸出：
"name","age","city" "John",30,"New York" "Jane",25,"Los Angeles" "Doe",35,"Chicago"
說明
parse()方法將數(shù)組中的每個對象作為一行- 默認會提取所有對象的所有鍵作為字段名
三、定制轉換：選擇特定字段
我們可以通過 fields 選項，指定輸出哪些字段，保證輸出內容的可控性。
示例：只導出 name 和 email
import { Parser } from '@json2csv/plainjs';
const users = [
{ name: 'Alice', age: 30, email: 'alice@example.com' },
{ name: 'Bob', age: 25, email: 'bob@example.com' }
];
const customOpts = { fields: ['name', 'email'] };
const customParser = new Parser(customOpts);
const csv = customParser.parse(users);
console.log(csv);
輸出：
name,email Alice,alice@example.com Bob,bob@example.com
說明
- 只提取配置中列出的字段，支持自定義順序
四、深入：使用復雜參數(shù)定制格式
@json2csv/plainjs 提供多種選項，幫助你控制輸出格式。
1. 自定義字段標題
import { Parser } from '@json2csv/plainjs';
const users = [
{ name: 'Alice', age: 30, email: 'alice@example.com' },
{ name: 'Bob', age: 25, email: 'bob@example.com' }
];
const fields = [
{ label: '姓名', value: 'name' },
{ label: '年齡', value: 'age' }
];
const customOpts = { fields };
const customParser = new Parser(customOpts);
const csv = customParser.parse(users);
console.log(csv);
輸出：
姓名,年齡 Alice,30 Bob,25
2. 添加換行符和其他格式控制
除了基本功能，你還可以通過選項調整字段分隔符、換行符等。
import { Parser } from '@json2csv/plainjs';
const users = [
{ name: 'Alice', age: 30, email: 'alice@example.com' },
{ name: 'Bob', age: 25, email: 'bob@example.com' }
];
const fields = [
{ label: '姓名', value: 'name' },
{ label: '年齡', value: 'age' }
];
const options = {
fields,
delimiter: ';', // 使用分號作為字段分隔符
eol: '\r\n' // 換行符使用 Windows 風格
};
const customParser = new Parser(options);
const csv = customParser.parse(users);
console.log(csv);
五、實戰(zhàn)案例：導出嵌套JSON
假設你的 JSON 中包含嵌套對象，如何處理？
import { Parser } from '@json2csv/plainjs';
const data = [
{
id: 1,
name: 'Alice',
address: { city: 'Beijing', street: 'Chao Yang' }
},
{
id: 2,
name: 'Bob',
address: { city: 'Shanghai', street: 'Pudong' }
}
];
// 通過指定字段的路徑，將嵌套對象扁平化
const fields = [
{ label: 'ID', value: 'id' },
{ label: '名稱', value: 'name' },
{ label: '城市', value: 'address.city' },
{ label: '街道', value: 'address.street' }
];
const customParser = new Parser({fields});
const csv = customParser.parse(data);
console.log(csv);
輸出：
ID,名稱,城市,街道 1,Alice,Beijing,Chao Yang 2,Bob,Shanghai,Pudong
結語
到此這篇關于利用純JS實現(xiàn)JSON轉CSV的技巧全攻略的文章就介紹到這了,更多相關JavaScript JSON轉CSV內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文通過實例代碼給大家介紹了jQuery EasyUI window窗口使用功能，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
JavaScript Event學習第十章 一些可替換的事件對
為了讓我們的JavaScript驅動的頁面對那些不能或者不想使用鼠標的用戶也能很好的使用，我們對于像mouseover和click這樣的事件做一些處理，同樣的，對于非鼠標事件也同樣的要我們的腳本執(zhí)行。2010-02-02
js createRange與createTextRange的一些用法實例
關于createTextRange和createRange的一些用法,腳本之家增強版。2010-05-05
JavaScript進行數(shù)據(jù)去重的多種實現(xiàn)方式
在數(shù)據(jù)處理的過程中,數(shù)據(jù)去重是一個常見且重要的任務,在 JavaScript 中,有多種方法可以實現(xiàn)數(shù)據(jù)去重,每種方法都有其適用場景和優(yōu)缺點,下面我們就來詳細講講吧2025-05-05
js函數(shù)獲取html中className所在的內容并去除標簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內容，具體實現(xiàn)思路如下，喜歡的朋友可以參考下2013-09-09
javascript在IE下trim函數(shù)無法使用的解決方法
這篇文章主要介紹了javascript在IE下trim函數(shù)無法使用的解決方法,分別敘述了javascript以及jQuery下的解決方案,對于WEB前端javascript設計人員進行瀏覽器兼容性調試有不錯的借鑒價值,需要的朋友可以參考下2014-09-09
這篇文章介紹了javascript閉包的高級使用方法實例，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了js解析json讀取List中的實體對象的具體實現(xiàn),需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了jquery實現(xiàn)左右滑動式輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Javascript實現(xiàn)簡易天數(shù)計算器
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)簡易天數(shù)計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05