Ant Design Excel 导入导出教程：完整指南

Ant Design 是一个基于 React 的 UI 组件库，可以轻松实现 Excel 文件的导入和导出。

导入 Excel 文件

Ant Design 提供了 Upload 组件用于上传文件。在使用前需要安装依赖：

npm install --save antd

然后在需要上传 Excel 文件的组件中引入 Upload 组件：

import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function UploadExcel() {
  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <Upload {...props}>
      <Button icon={<UploadOutlined />}>Click to Upload</Button>
    </Upload>
  );
}

在上面的代码中，我们创建了一个名为 UploadExcel 的组件，并引入了 Upload 组件。我们设置了上传的 url 和 headers，然后在 onChange 事件中处理上传的结果。

导出 Excel 文件

Ant Design 提供了两个组件可以用于导出 Excel 文件：Table 和 ExcelExport。Table 组件可以将表格数据导出为 Excel 文件，ExcelExport 组件则可以将任何数据导出为 Excel 文件。

2.1 利用 Table 组件导出 Excel 文件

首先需要安装依赖：

npm install --save xlsx

然后我们可以使用 Table 组件：

import { Table, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

function ExportExcel() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];

  const handleExport = () => {
    /* convert data to worksheet */
    const ws = XLSX.utils.json_to_sheet(data);

    /* generate workbook and add the worksheet */
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'example.xlsx');
  };

  return (
    <>
      <Table columns={columns} dataSource={data} />
      <Button icon={<DownloadOutlined />} onClick={handleExport}>
        Export
      </Button>
    </>
  );
}

在上面的代码中，我们创建了一个名为 ExportExcel 的组件，并引入了 Table 组件。我们设置了表格的列和数据，然后通过 handleExport 函数将数据导出为 Excel 文件。

2.2 利用 ExcelExport 组件导出 Excel 文件

ExcelExport 组件可以将任何数据导出为 Excel 文件，包括多个表格、图表等。需要注意的是，ExcelExport 组件依赖于 FileSaver.js 和 JSZip 库，需要安装依赖：

npm install --save file-saver jszip antd-xlsx

然后我们可以使用 ExcelExport 组件：

import { ExcelExport, ExcelExportColumn } from 'antd-excel-export';
import { Button } from 'antd';

function ExportExcel() {
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];

  const handleExport = () => {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
    ];

    const filename = 'example.xlsx';

    return (
      <ExcelExport
        filename={filename}
        element={<Button>Export</Button>}
      >
        <ExcelExportColumn label='Name' value='name' />
        <ExcelExportColumn label='Age' value='age' />
        <ExcelExportColumn label='Address' value='address' />
        <ExcelExportSheet data={data} name='Sheet1'>
          {columns.map((column) => (
            <ExcelExportColumn
              key={column.key}
              label={column.title}
              value={column.dataIndex}
            />
          ))}
        </ExcelExportSheet>
      </ExcelExport>
    );
  };

  return <>{handleExport()}</>;
}

在上面的代码中，我们创建了一个名为 ExportExcel 的组件，并引入了 ExcelExport 组件。我们设置了表格的列和数据，然后通过 handleExport 函数将数据导出为 Excel 文件。由于 ExcelExport 组件需要渲染到 DOM 中，所以我们需要将 handleExport 函数返回的元素渲染出来。

通过以上步骤，您就可以轻松地使用 Ant Design 实现 Excel 文件的导入和导出。希望这篇教程对您有所帮助。