react-export-excel仅支持.xlsx，设为.xls时提示格式无效求助

Hey there, I’ve run into this exact issue before! The core problem here is that react-export-excel doesn’t actually support generating true .xls files—it’s built on top of the xlsx library, which defaults to creating modern Open XML (.xlsx) files. When you force the fileExtension to "xls", you’re just renaming the file extension without changing the underlying file structure. Since .xls uses an older binary format that’s completely different from .xlsx, Excel throws that "invalid format" error when trying to open it.

What you can do to fix this: #

Option 1: Generate a real .xls file (recommended if you need true .xls support)

You’ll need to bypass react-export-excel and use the xlsx library directly, which does support exporting to the older .xls format. Here’s how to adapt your code:

First, install the xlsx library if you haven’t already:

npm install xlsx

Then create a custom export button component:

import XLSX from 'xlsx';
import { MDBIcon } from 'mdb-react-ui-kit';

const ExportExcelButton = ({ email }) => {
  const handleExport = () => {
    // Convert your data array to a worksheet
    const worksheet = XLSX.utils.json_to_sheet(email);
    // Create a new workbook and add the worksheet
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Employees');
    
    // Export the workbook as a genuine .xls file
    XLSX.writeFile(workbook, 'Email.xls', { bookType: 'xls' });
  };

  return (
    <MDBIcon 
      icon="file-excel" 
      size="2x" 
      className="green-text" 
      onClick={handleExport}
      style={{ cursor: 'pointer' }}
    />
  );
};

This will generate a proper .xls file that Excel will open without any errors.

Option 2: Stick to .xlsx with react-export-excel (simpler if .xls isn’t a hard requirement)

If you don’t strictly need the old .xls format, just revert the fileExtension to "xlsx"—this is the format the library is designed to produce, so it will work flawlessly:

<ExcelFile 
  element={<MDBIcon icon="file-excel" size="2x" className="green-text" />} 
  filename="Email" 
  fileExtension="xlsx" // Use the library's supported format
>
  <ExcelSheet data={props.email} name="Employees">
    <ExcelColumn label="Email" value="Email" />
    <ExcelColumn label="Quota" value="Quota" />
  </ExcelSheet>
</ExcelFile>

A quick heads-up: Some folks try renaming .xlsx files to .xls to trick systems that only accept the older extension, but this is unreliable—many Excel versions will still throw warnings or refuse to open the file. It’s always better to use the correct format for your use case.

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