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


相关推荐
whale fall几秒前
npm代理设置 + npm配置镜像源
前端·npm·node.js
学吧那就几秒前
JavaScript进阶之路(一)
javascript
用户40812812003811 分钟前
前端资源缓存策略
前端
PineappleCoder1 分钟前
React 18 开发完全指南:从环境搭建到调试优化
前端·react.js
smile_逸仙1 分钟前
几行代码的深层树形结构检索
前端
用户40812812003812 分钟前
三栏布局
前端
雲墨款哥3 分钟前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
拾光拾趣录3 分钟前
Webpack 打包中的 Hash 生成机制
前端·webpack·前端工程化
十盒半价5 分钟前
闭包:JS 里的 “背包客”,背走了变量的秘密
前端·javascript·trae
Rasir6 分钟前
第三章:命令行交互与流程控制
前端