React实现Excel文件的导出与在线预览功能

npm install xlsx@0.17.1-alpha.3 react@18 react-dom@18 --save

import React, { unstable_ConcurrentMode as ConcurrentMode } from 'react';
import * as XLSX from 'xlsx';

const ExcelExport = () => {
  const exportToExcel = () => {
    const data = [
      ['姓名', '年龄'],
      ['Alice', 25],
      ['Bob', 30],
      ['Charlie', 22],
    ];

    const ws = XLSX.utils.aoa_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    XLSX.writeFile(wb, 'exported_data.xlsx');
  };

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

export default ExcelExport;

npm install react-excel-renderer --save

import React, { useState } from 'react';
import ReactDataSheet from 'react-datasheet';
import 'react-datasheet/lib/react-datasheet.css';
import { OutTable, ExcelRenderer } from 'react-excel-renderer';

const ExcelPreview = () => {
  const [dataLoaded, setDataLoaded] = useState(false);
  const [rows, setRows] = useState([]);
  const [cols, setCols] = useState([]);

  const fileHandler = (event) => {
    let fileObj = event.target.files[0];

    ExcelRenderer(fileObj, (err, resp) => {
      if (err) {
        console.log(err);
      } else {
        setDataLoaded(true);
        setCols(resp.cols);
        setRows(resp.rows);
      }
    });
  };

  return (
    <ConcurrentMode>
      <div>
        <input
          type="file"
          onChange={(event) => fileHandler(event)}
          style={{ padding: '10px' }}
        />
        {dataLoaded && (
          <ReactDataSheet
            data={rows}
            valueRenderer={(cell) => cell.value}
            sheetRenderer={(props) => <OutTable {...props} />}
          />
        )}
      </div>
    </ConcurrentMode>
  );
};

export default ExcelPreview;