前端如何将json数据导出为excel文件

2023-08-13 23:34| 来源: 网络整理| 查看: 265

前端人员在开发时，有时为了满足用户需求，需要下载excel文件。这里通常有两种做法，一种是后端工程师将数据转化为excel，然后前端进行下载即可，还有一种方式，前端请求需要下载的数据，在浏览器端生成excel文件，然后进行下载。

今天就和大家聊一下第二种方式，如果用第二种方式的话，我们需要引入xlsx这个npm包，来看一下示例代码：

//1、定义导出文件名称 var filename = "write.xlsx"; // 定义导出数据 var data = [['第一列','第二列','第三列'],[1,2,3],[true, false, null, "sheetjs"],["foo","bar",new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]] // 定义excel文档的名称 var ws_name = "SheetJS"; // 初始化一个excel文件 var wb = XLSX.utils.book_new(); // 初始化一个excel文档，此时需要传入数据 var ws = XLSX.utils.aoa_to_sheet(data); // 将文档插入文件并定义名称 XLSX.utils.book_append_sheet(wb, ws, ws_name); // 执行下载 XLSX.writeFile(wb, filename);

使用xlse导出文件时，json数据需要转换为数组，通常为二维数组，通常第一行为表头，如：['第一列','第二列','第三列']，然后就是使用xlse的步骤了，通常分为如下几个步骤：

1、调用XLSX.utils.book_new()初始化excel文件。

2、调用XLSX.utils.aoa_to_sheet(data),初始化excel文档，此时需要传入数据，数据为二维数组，第一行通常为表头。

3、调用XLSX.utils.book_append_sheet(wb, ws, ws_name)，将文档插入excel文件，并为文档命名。

4、调用XLSX.writeFile(wb, filename)下载excel文件，并为excel文件命名。

我在react中应用时的代码如下：

import XLSX from 'xlsx'; function App(){ const getClocks(){ //请求数据的方法 } const OnExport=async ()=>{ const res = await getClocks(); let data = res.data; let head = Object.keys(data[0]) data = data.map(e => Object.values(e)) data.unshift(head) let filename = "write.xlsx"; let ws_name = "SheetJS"; let wb = XLSX.utils.book_new(); let ws = XLSX.utils.aoa_to_sheet(data); XLSX.utils.book_append_sheet(wb, ws, ws_name); XLSX.writeFile(wb, filename); } return }

以上便是在前端项目中导出excel文件的方法，希望对你有所帮助。

【本文地址】

公司简介

联系我们