antdesgin table 组件下载成excel

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

一、需求

原组件如下，需要添加下载功能

import React, { useState } from 'react';
import { Divider, Radio, Table } from 'antd';
import type { TableColumnsType } from 'antd';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: TableColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data: DataType[] = [
  {
    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: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sydney No. 1 Lake Park',
  },
];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

const App: React.FC = () => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

  return (
    <div>
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="checkbox">Checkbox</Radio>
        <Radio value="radio">radio</Radio>
      </Radio.Group>

      <Divider />

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
};

export default App;

要在React组件中添加一个下载按钮，并将Ant Design的Table组件中的数据下载为Excel文件，你可以使用exceljs或xlsx这样的库来生成Excel文件，并通过JavaScript的Blob和a标签来实现下载。
首先，安装exceljs库：

npm install exceljs

然后，在XiMuBiao组件中添加一个下载按钮，并实现将表格数据转换为Excel文件的功能：

// XiMuBiao.tsx
import React from 'react';
import { Table, TableColumnsType, TableProps } from 'antd';
import { saveAs } from 'file-saver';
import ExcelJS from 'exceljs';
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}
const XiMuBiao: React.FC = () => {
    const columns: TableColumnsType<DataType> = [
        // ... (columns definition as before)
    ];
    const data: DataType[] = [
        // ... (data array as before)
    ];
    const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };
    const downloadExcel = async () => {
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet('Sheet1');
        // Add column headers
        worksheet.columns = [
            { header: 'Name', key: 'name', width: 30 },
            { header: 'Age', key: 'age', width: 10 },
            { header: 'Address', key: 'address', width: 40 },
        ];
        // Add data rows
        data.forEach((row) => {
            worksheet.addRow({
                name: row.name,
                age: row.age,
                address: row.address,
            });
        });
        // Generate Excel file
        const buffer = await workbook.xlsx.writeBuffer();
        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '测试.xlsx');
    };
    return (
        <div>
            <Table columns={columns} dataSource={data} onChange={onChange} />
            <button onClick={downloadExcel} style={{ position: 'absolute', right: 0, bottom: 0 }}>
                下载为Excel
            </button>
        </div>
    );
};
export default XiMuBiao;

在这个例子中，我们添加了一个名为downloadExcel的函数，该函数使用exceljs库创建一个Excel工作簿，并添加数据。然后，我们使用saveAs函数（来自file-saver库，exceljs依赖于它）将生成的Excel文件保存到用户的设备上。

请注意，file-saver库是exceljs的依赖，所以你不需要单独安装它。

现在，当用户点击“下载为Excel”按钮时，表格数据将被下载为一个名为“测试.xlsx”的Excel文件到用户的默认下载位置，而不是直接到桌面。由于浏览器的安全限制，网页应用无法直接将文件保存到用户的桌面，但可以保存到默认的下载文件夹中。用户可以从那里手动将文件移动到桌面。

二、报错

[plugin:vite:import-analysis] Failed to resolve import "file-saver" from "src\utils\xiMuBiao.tsx". Does the file exist?
D:/Code/propo-assistant-app/src/utils/xiMuBiao.tsx:3:23
16 |  }
17 |  import { Table } from "antd";
18 |  import { saveAs } from "file-saver";
   |                          ^
19 |  import ExcelJS from "exceljs";
20 |  const XiMuBiao = () => {

错误信息显示，Vite无法解析file-saver模块的导入。是因为你没有正确地安装或导入file-saver库。

错误信息：

[plugin:vite:import-analysis] Failed to resolve import "file-saver" from "src\utils\xiMuBiao.tsx". Does the file exist?
D:/Code/propo-assistant-app/src/utils/xiMuBiao.tsx:3:23
16 |  }
17 |  import { Table } from "antd";
18 |  import { saveAs } from "file-saver";
   |                          ^
19 |  import ExcelJS from "exceljs";
20 |  const XiMuBiao = () => {

错误原因：

1. file-saver库没有被正确安装。

2. file-saver库的导入路径可能不正确。
   解决方案：

3. 确保你已经安装了file-saver库。你可以使用以下命令来安装它：

   npm install file-saver
   

4. 在你的代码中，确保file-saver库是以正确的方式导入的。file-saver库的默认导出是saveAs函数，你应该这样导入它：

   import { saveAs } from 'file-saver';
   

5. 如果你在xiMuBiao.tsx文件中使用了saveAs函数，确保这个文件位于正确的路径下，并且导入语句正确。
   修改后的xiMuBiao.tsx文件应该看起来像这样：

import React from 'react';
import { Table, TableColumnsType, TableProps } from 'antd';
import { saveAs } from 'file-saver'; // 确保这样导入
import ExcelJS from 'exceljs';
// ... (其他代码)
const downloadExcel = async () => {
    // ... (下载Excel的逻辑)
};
// ... (其他代码)
return (
    <div>
        <Table columns={columns} dataSource={data} onChange={onChange} />
        <button onClick={downloadExcel} style={{ position: 'absolute', right: 0, bottom: 0 }}>
            下载为Excel
        </button>
    </div>
);

如果你已经安装了file-saver并且正确地导入了它，但是仍然遇到这个错误，那么可能需要重启你的开发服务器或者重新构建你的项目来使Vite重新解析模块。