零依赖、零框架!纯JS快速掌握 JSON 转 CSV 技巧全攻略

引言

在数据处理和导出方面,JSON 和 CSV 格式是两个常见的角色。JSON(JavaScript Object Notation)以其良好的可读性和灵活性被广泛应用于数据存储和传输,而CSV(Comma-Separated Values)则因其简洁易读、方便导入到各种表格软件中而深受欢迎。今天,我们将介绍如何在纯 JavaScript 中,利用开源库 @json2csv/plainjs 轻松实现从 JSON 转换到 CSV,帮助你高效处理数据。


一、什么是 @json2csv/plainjs

@json2csv/plainjsjson2csv 的一种轻量版(纯原生 JS 实现),无需依赖任何第三方库或环境(比如 Node.js 特定模块),非常适合浏览器或纯 JS 环境下使用。

主要功能:

  • 将 JSON 对象或数组转换成 CSV 格式
  • 支持自定义字段和格式
  • 简单易用,无复杂配置

二、基础用法:将简单 JSON 转为 CSV

示例:转换一组用户数据

javascript 复制代码
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);
}

输出:

arduino 复制代码
"name","age","city"
"John",30,"New York"
"Jane",25,"Los Angeles"
"Doe",35,"Chicago"

说明

  • parse() 方法将数组中的每个对象作为一行
  • 默认会提取所有对象的所有键作为字段名

三、定制转换:选择特定字段

我们可以通过 fields 选项,指定输出哪些字段,保证输出内容的可控性。

示例:只导出 nameemail

javascript 复制代码
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);

输出:

java 复制代码
name,email
Alice,alice@example.com
Bob,bob@example.com

说明

  • 只提取配置中列出的字段,支持自定义顺序

四、深入:使用复杂参数定制格式

@json2csv/plainjs 提供多种选项,帮助你控制输出格式。

1. 自定义字段标题

javascript 复制代码
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. 添加换行符和其他格式控制

除了基本功能,你还可以通过选项调整字段分隔符、换行符等。

javascript 复制代码
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 中包含嵌套对象,如何处理?

javascript 复制代码
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开发干货。


相关推荐
excel33 分钟前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登33 分钟前
【Nest】基本概念
javascript·node.js·express
前端小白从0开始1 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible1 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫1 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评2 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner2 小时前
【html】canvas实现一个时钟
前端·html
林烈涛2 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99993 小时前
Unocss
开发语言·前端
goto_w3 小时前
前端实现复杂的Excel导出
前端·excel