react中实现导出excel文件

在 React 项目中实现点击按钮后导出数据为 Excel 文件，可以使用 xlsx 和 file-saver 这两个库。

一、安装依赖

在项目中安装必要的库：

npm install xlsx file-saver

• xlsx：用于生成 Excel 文件。
• file-saver：用于触发文件下载。

二、实现导出功能

import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import {
    saveAs } from 'file-saver'; // 用于保存文件

const ExportExcel = () => {
   
  const handleExport = () => {
   
    // 示例数据
    const data = [
      {
    Name: 'John Doe', Age: 28, City: 'New York' },
      {
    Name: 'Jane Smith', Age: 34, City: 'San Francisco' },
      {
    Name: 'Sam Green', Age: 45, City: 'Chicago' },
    ];

    // 将数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(data);

    // 创建一个新的工作簿
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 导出为 Blob
    const excelBuffer = XLSX.write(workbook, {
    bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], {
    type: 'application/octet-stream' });

    // 使用 FileSaver 保存文件
    saveAs(blob, 'example.xlsx');
  };

  return (
    <div>
      <button onClick={
   handleExport}>导出 Excel</button>
    </div>
  );
};

export default ExportExcel;

三、自定义列标题

在使用 xlsx 时，如果需要自定义列标题，可以通过手动创建数据表头，然后将其与数据合并为新的数组，最后生成工作表。

import React from 'react';
import * as XLSX from 'xlsx'; // 用于操作 Excel 文件
import {
    saveAs } from 'file-saver'; // 用于保存文件

const ExportExcelWithHeaders = () => {
   
  const handleExport = () => {
   
    // 示例数据
    const data = [
      {
    name: 'John Doe', age: 28, city: 'New York&#