react 原生js 导出excel文件
时间: 2024-08-12 09:10:08 浏览: 60
在React中,原生JavaScript导出Excel文件通常涉及到使用第三方库,因为浏览器本身并不支持直接操作Excel文件。一个常用的库是`xlsx`,它允许你在浏览器端创建、读取和写入Excel文件。以下是一个简单的步骤:
1. **安装依赖**:
首先,你需要在项目中安装`xlsx`库。你可以使用npm或yarn:
```bash
npm install xlsx
# 或者
yarn add xlsx
```
2. **使用`xlsx`创建工作表**:
创建一个新的工作表,并添加数据:
```jsx
import XLSX from 'xlsx';
const data = [
['Name', 'Age', 'Email'],
['John Doe', 30, 'john@example.com'],
['Jane Smith', 25, 'jane@example.com'],
];
const workbook = {
SheetNames: ['Sheet1'], // 工作簿名称
Sheets: {
Sheet1: XLSX.utils.encode_cell({ s: 'A', r: 1 }), // 第一张工作表
...XLSX.utils.sheet_to_json(data), // 将数据转换为JSON并追加到工作表
},
};
```
3. **生成Excel文件**:
使用`XLSX.writeFile`方法将工作簿写入文件:
```jsx
const file = XLSX.write(workbook, { type: 'binary' }); // binary类型用于下载
const blob = new Blob([file], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob); // 创建一个URL以供下载
// 下载按钮事件处理
const downloadButton = document.createElement('a');
downloadButton.href = url;
downloadButton.download = 'data.xlsx'; // 文件名
downloadButton.click(); // 触发下载
URL.revokeObjectURL(url); // 下载后释放URL
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)