react 点击导出表格数据
时间: 2023-05-30 13:07:57 浏览: 84
要实现点击导出表格数据,可以使用以下步骤:
1. 将表格数据存储在一个数组中。
2. 创建一个按钮,当用户点击按钮时,触发一个函数。
3. 在函数中,使用 JavaScript 的 File API 创建一个 CSV 文件,并将表格数据写入其中。
4. 将 CSV 文件下载到用户的本地计算机。
以下是一个基本的示例代码,演示如何实现点击导出表格数据:
```javascript
function downloadCSV() {
// 获取表格数据
const tableData = [
['Name', 'Age', 'Email'],
['John', '25', 'john@example.com'],
['Jane', '32', 'jane@example.com'],
['Bob', '45', 'bob@example.com']
];
// 创建 CSV 文件
const csvContent = 'data:text/csv;charset=utf-8,' + tableData.map(row => row.join(',')).join('\n');
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'table.csv');
document.body.appendChild(link);
// 下载 CSV 文件
link.click();
}
```
在上面的示例代码中,我们首先定义了一个包含表格数据的数组,然后创建了一个名为 `downloadCSV` 的函数。该函数首先将表格数据转换为 CSV 格式,然后创建了一个下载链接,并将其添加到页面中。最后,调用 `click` 方法触发下载链接的点击事件,以下载 CSV 文件。