零依赖、零框架！纯JS快速掌握 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

---

结语

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。

---