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 checkedname: record.name,}),
};const App: React.FC = () => {const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');return (<div><Radio.GrouponChange={({ target: { value } }) => {setSelectionType(value);}}value={selectionType}><Radio value="checkbox">Checkbox</Radio><Radio value="radio">radio</Radio></Radio.Group><Divider /><TablerowSelection={{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 headersworksheet.columns = [{ header: 'Name', key: 'name', width: 30 },{ header: 'Age', key: 'age', width: 10 },{ header: 'Address', key: 'address', width: 40 },];// Add data rowsdata.forEach((row) => {worksheet.addRow({name: row.name,age: row.age,address: row.address,});});// Generate Excel fileconst 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重新解析模块。