如何使用 Nextjs/React 将 JSON 对象导出到 Excel？答案

【问题标题】：How can I export a JSON object to Excel using Nextjs/React?如何使用 Nextjs/React 将 JSON 对象导出到 Excel？
【发布时间】：2023-01-07 12:49:35
【问题描述】：

我有一个端点可以检索如下所示的 json 对象：

"data": [
{
"id": 1,
"temaIndicador": "Indian",
"codigo": "001",
"observaciones": "Interactions Specialist tertiary Regional Tennessee",
"activo": "SI",
"urlImagen": "http://placeimg.com/640/480",
"color": "cyan",
"createdAt": "2022-01-26T18:48:36.002Z"
]

我想实现一个按钮，允许用户将数据导出为多种格式，包括 Excel (.xlsx)，但我真的不知道要开始。我已经看到意识到这一点的图书馆，但我感觉不舒服，因为它们通常每周的下载量不到 1.5k。

我的目的是导出一个带有简单表格的 Excel 文档，其中标题将成为对象的属性。

【问题讨论】：

您可以首先将 json 导出为 csv 文件（逗号分隔或分号分隔）。第一行将是列的名称。
json2csv 每周有 774,337 次下载。 exceljs 本周下载量为 454,689 次。 excel-export 已经 6 岁了，但每周仍有 37,945 次下载。

标签： javascript reactjs next.js export-to-excel

【解决方案1】：

使用 xlsx 第三方库。

npm install xlsx

使用库：（使用以下行之一导入）-

import XLSX from "xlsx";

或者

import * as XLSX from 'xlsx';

单击按钮时下载函数触发器（将数据作为参数传递）：

downloadExcel = (data) => {
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    //let buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" });
    //XLSX.write(workbook, { bookType: "xlsx", type: "binary" });
    XLSX.writeFile(workbook, "DataSheet.xlsx");
  };

Download Button: (函数调用：你可以根据自己的需求修改，下面是React Class Component的实现，所以我用了this）

<button onClick={()=>this.downloadExcel(data)}>
    Download As Excel
</button>

【讨论】：

太感谢了！这正是我所需要的
它显示以下错误“尝试导入错误：‘xlsx’不包含默认导出（导入为‘XLSX’）”
从 'xlsx' 导入 * 作为 XLSX；

【解决方案2】：

根据已接受的答案，如果有人收到“尝试导入错误：‘xlsx’不包含默认导出（导入为‘XLSX’）”错误，请尝试使用以下方法导入：

import * as XLSX from 'xlsx';

希望能帮助到你。

【讨论】：