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