脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript JSON转CSV

利用纯JS实现JSON转CSV的技巧全攻略

 更新时间：2025年06月26日 08:32:25   作者：烛阴  
在数据处理和导出方面,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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现无限轮播无倒退效果

    JS实现无限轮播无倒退效果

    这篇文章主要为大家详细介绍了JS实现无限轮播无倒退效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 微信小程序实现多选框全选操作

    微信小程序实现多选框全选操作

    这篇文章主要为大家详细介绍了微信小程序实现多选框全选操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS中用三种方式实现导航菜单中的二级下拉菜单

    JS中用三种方式实现导航菜单中的二级下拉菜单

    我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单呢？下面小编给大家分享JS中用三种方式实现导航菜单中的二级下拉菜单，感兴趣的朋友一起看看吧
    2016-10-10
  • js+css3实现炫酷时钟

    js+css3实现炫酷时钟

    这篇文章主要为大家详细介绍了js+css3实现炫酷时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别...
    2007-01-01
  • js中apply方法的使用详细解析

    js中apply方法的使用详细解析

    本文是对js中apply方法的使用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 正则表达式替换html元素属性的方法

    正则表达式替换html元素属性的方法

    下面小编就为大家带来一篇正则表达式替换html元素属性的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信小程序图片自适应实现解析

    微信小程序图片自适应实现解析

    这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • JavaScript onclick事件使用方法详解

    JavaScript onclick事件使用方法详解

    这篇文章主要介绍了JavaScript onclick事件使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • js实现数组冒泡排序、快速排序原理

    js实现数组冒泡排序、快速排序原理

    这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论