react 原生js 导出excel文件

在React中，原生JavaScript导出Excel文件通常涉及到使用第三方库，因为浏览器本身并不支持直接操作Excel文件。一个常用的库是`xlsx`，它允许你在浏览器端创建、读取和写入Excel文件。以下是一个简单的步骤：

1. **安装依赖**:
首先，你需要在项目中安装`xlsx`库。你可以使用npm或yarn：

   npm install xlsx
   # 或者
   yarn add xlsx

2. **使用`xlsx`创建工作表**:
创建一个新的工作表，并添加数据：

   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`方法将工作簿写入文件：

   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