利用纯JS实现JSON转CSV的技巧全攻略
作者：烛阴
在数据处理和导出方面,JSON 和 CSV 格式是两个常见的角色,今天,我们将介绍如何在纯 JavaScript 中,利用开源库 @json2csv/plainjs 轻松实现从 JSON 转换到 CSV,帮助你高效处理数据,需要的朋友可以参考下
引言
在数据处理和导出方面，JSON 和 CSV 格式是两个常见的角色。JSON（JavaScript Object Notation）以其良好的可读性和灵活性被广泛应用于数据存储和传输，而CSV（Comma-Separated Values）则因其简洁易读、方便导入到各种表格软件中而深受欢迎。今天，我们将介绍如何在纯 JavaScript 中，利用开源库 @json2csv/plainjs 轻松实现从 JSON 转换到 CSV，帮助你高效处理数据。
一、什么是 @json2csv/plainjs？
@json2csv/plainjs 是 json2csv 的一种轻量版（纯原生 JS 实现），无需依赖任何第三方库或环境（比如 Node.js 特定模块），非常适合浏览器或纯 JS 环境下使用。
主要功能：
- 将 JSON 对象或数组转换成 CSV 格式
- 支持自定义字段和格式
- 简单易用，无复杂配置
二、基础用法：将简单 JSON 转为 CSV
示例：转换一组用户数据
import { Parser } from '@json2csv/plainjs';
// 示例数据
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()方法将数组中的每个对象作为一行- 默认会提取所有对象的所有键作为字段名
三、定制转换：选择特定字段
我们可以通过 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
说明
- 只提取配置中列出的字段，支持自定义顺序
四、深入：使用复杂参数定制格式
@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);
五、实战案例：导出嵌套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实现JSON转CSV的技巧全攻略的文章就介绍到这了,更多相关JavaScript JSON转CSV内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！