React.js前端导出Excel的方式

import React from 'react';
import { CSVLink } from 'react-csv';
const headers = [
  { label: 'First Name', key: 'firstname' },
  { label: 'Last Name', key: 'lastname' },
  { label: 'Email', key: 'email' },
];
const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
export default function App() {
  return (
    <CSVLink data={data} headers={headers}>
      Download me
    </CSVLink>
  );
}

<table id="TableToExport">

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

<button id="sheetjsexport"><b>导出 XLSX</b></button>

document.getElementById("sheetjsexport").addEventListener('click', function() {
  /*根据页面上的表格创建工作表 */
  var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
  /* 导出文件下载 */
  XLSX.writeFile(wb, "SheetJSTable.xlsx");
});

function Table2XLSX(props) {
  const xport = async () => {
      const table = document.getElementById("Table2XLSX");
      const wb = XLSX.utils.table_to_book(table);
      XLSX.writeFile(wb, "SheetJSTable.xlsx");
  };
  return (<>
    <table id="Table2XLSX"><tbody>
      <tr><td colSpan="3">SheetJS Table Export</td></tr>
      <tr><td>Author</td><td>ID</td><td>Note</td></tr>
      <tr><td>SheetJS</td><td>7262</td><td>Hi!</td></tr>
      <tr><td colSpan="3">
        <a href="//sheetjs.com" rel="external nofollow" >Powered by SheetJS</a>
      </td></tr>
    </tbody></table>
    <button onClick={xport}><b>Export XLSX!</b></button>
  </>);
}

/**
 * 导出 excel 文件
 * @param array JSON 数组
 * @param sheetName 第一张表名
 * @param fileName 文件名
 */
export function exportExcelFile(array=[], sheetName = 'sheet表', fileName = 'example.xlsx') {
  const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
  const workBook = {
    SheetNames: [sheetName],
    Sheets: {
      [sheetName]: jsonWorkSheet,
    }
  };
  return xlsx.writeFile(workBook, fileName);
}

<button
  disabled={dataSource.length === 0}
  onClick={() => exportExcelFile(dataSource)}
>
  导出 Excel
</button>