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

前端人员在开发时，有时为了满足用户需求，需要下载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 <button onClick={OnExport} />
}

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