JSON 导出 xlsx

预计阅读时间: 小于 1 分钟

业务场景

在开发后台管理系统过程中,大多会遇到以下场景:

  • 将查询出来的 JSON 数据导出生成 Excel 类型的文件;
  • 前端读取 Excel 类型文件,生成 JSON 数据;

读文件和写文件的场景在开发中非常常见,这里我们以导出 Excel xlsx 格式文件为例,介绍如何使用 JavaScript 读取当前的 JSON 数据,写入到 Excel xlsx 文件中。

安装依赖

代码示例
1yarn add write-excel-file
2// or
3npm install write-excel-file
4// or
5pnpm install write-excel-file
6// or
7bun install write-excel-file
提示

  具体操作方法请查看 npmjs write-excel-file;npmmirror 访问地址:write-excel-file

封装方法

代码示例
1import WriteXlsxFile from "write-excel-file";
2
3/**
4 * @description Json数据导出Xlsx
5 * @param {Array} data JSON数据
6 * @param {Array} header xlsx表头 [{key:'',name:'',width:''}]
7 *  @param {String} key column的key
8 *  @param {String} name column的name
9 *  @param {Number} width column的width
10 * @param {String} fileName xlsx文件名
11 **/
12export const DataToXlsx = async (data, header, fileName) => {
13	let stmp = {
14		column: "",
15		with: 20,
16		value: null
17	};
18
19	let SCHEMA = header.map(({ key, name, width, type }) => {
20		let column = Object.assign({}, stmp, {
21			type: type ?? String,
22			column: name,
23			width: width || 20,
24			value: v => v?.[key] ?? ""
25		});
26		return column;
27	});
28
29	let FILE_NAME = fileName.lastIndexOf(".xlsx") != -1 ? fileName : fileName + ".xlsx";
30
31	await WriteXlsxFile(data, {
32		schema: SCHEMA,
33		fileName: FILE_NAME,
34		headerStyle: {
35			backgroundColor: "#f2f6fc",
36			fontWeight: "bold",
37			align: "center",
38			height: 20
39		}
40	});
41};
注意事项:
  • 依据 JSON 数据对应格式的文件类型配置对应 “key” 值的 “type” 属性;
  • 借助第三方插件工具来实现数据格式的转换和导出;