ReactJS使用react-export-excel导出REST API数据至Excel时的jszip版本冲突报错咨询

Hey there, I’ve run into this exact dependency mismatch issue before when using react-export-excel! The problem boils down to the older version of xlsx that react-export-excel relies on having strict expectations about how jszip is structured, which clashes with both newer and older jszip releases. Let’s break down the fixes:

Option 1: Use a Verified Compatible Dependency Stack #

First, let’s clean up your current packages and install versions that play nicely together:

1. Uninstall the conflicting packages:

npm uninstall react-export-excel jszip xlsx

2. Install the tested compatible versions:

npm install react-export-excel@0.5.3 jszip@3.1.5 xlsx@0.14.1

Once these are installed, you can go back to using react-export-excel as intended. Here’s how to add the export button to your existing component:

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {/* Add this export component */}
      <ExcelFile filename="employee-data" element={<button>Export to Excel</button>}>
        <ExcelSheet data={dataSet1} name="Salary Info">
          <ExcelColumn label="Name" value="name" />
          <ExcelColumn label="Amount" value="amount" />
          <ExcelColumn label="Gender" value="sex" />
          <ExcelColumn label="Married?" value={(row) => row.is_married ? "Yes" : "No"} />
        </ExcelSheet>
        <ExcelSheet data={dataSet2} name="Remaining Balances">
          <ExcelColumn label="Name" value="name" />
          <ExcelColumn label="Total" value="total" />
          <ExcelColumn label="Remaining" value="remainig" />
        </ExcelSheet>
      </ExcelFile>
    </div>
  );
}

Option 2: Ditch react-export-excel and Use xlsx Directly (More Control) #

If you want to avoid dependency headaches entirely, using the xlsx library directly is a great alternative—it’s actively maintained and gives you full control over the export process:

1. Install xlsx:

npm install xlsx

2. Implement the export logic in your component:

import "./styles.css";
import React from "react";
import * as XLSX from 'xlsx';

const dataSet1 = [
  { name: "Johson", amount: 30000, sex: "M", is_married: true },
  { name: "Monika", amount: 355000, sex: "F", is_married: false },
  { name: "John", amount: 250000, sex: "M", is_married: false },
  { name: "Josef", amount: 450500, sex: "M", is_married: true }
];
const dataSet2 = [
  { name: "Johnson", total: 25, remainig: 16 },
  { name: "Josef", total: 25, remainig: 7 }
];

const handleExport = () => {
  // Create a new workbook
  const workbook = XLSX.utils.book_new();
  
  // Convert your data to worksheets
  const salarySheet = XLSX.utils.json_to_sheet(dataSet1);
  const balanceSheet = XLSX.utils.json_to_sheet(dataSet2);
  
  // Add sheets to the workbook
  XLSX.utils.book_append_sheet(workbook, salarySheet, "Salary Info");
  XLSX.utils.book_append_sheet(workbook, balanceSheet, "Remaining Balances");
  
  // Trigger the download
  XLSX.writeFile(workbook, "employee-data.xlsx");
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleExport}>Export to Excel</button>
    </div>
  );
}

This approach skips the middleman (react-export-excel) and uses the official library directly, so you won’t run into weird dependency path issues anymore.

内容的提问来源于stack exchange，提问作者dapidmini