文章目录
- 发现宝藏
- 一、需求
- 二、报错
发现宝藏
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。
一、需求
原组件如下，需要添加下载功能
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 = () => {
错误原因：
-
file-saver库没有被正确安装。 -
file-saver库的导入路径可能不正确。
解决方案： -
确保你已经安装了
file-saver库。你可以使用以下命令来安装它：npm install file-saver -
在你的代码中，确保
file-saver库是以正确的方式导入的。file-saver库的默认导出是saveAs函数，你应该这样导入它：import { saveAs } from 'file-saver'; -
如果你在
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重新解析模块。
