零依赖、零框架!纯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开发干货。


相关推荐
paopaokaka_luck16 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js