纯前端实现导出数据到excel文件

纯前端实现数据导出需使用 file-saver 和 xlsx 库来处理文件导出：

如何使用 

1. 安装依赖

   npm install file-saver xlsx

2. 添加导出按钮及导出逻辑

const exportToExcel = () => {
    const ws = XLSX.utils.json_to_sheet(data.map(item => ({
        发布渠道: item.channel,
        时间: item.startTime,
        人员: item.person,
        问题: item.issue,
        用户评价: item.userEvaluation === '1' ? '点赞' : '点踩',
        角色: item.role,
        工号: item.employeeId,
        部门: item.department,
        引用文章: item.article,
        产品分类: item.productCategory,
    })));
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    saveAs(blob, '统计数据.xlsx');
};

<Button type="primary" onClick={exportToExcel}>
   导出
</Button>

 使用详解

1. 数据转换：

• data.map(item => ({ ... })): 将 data 数组中的每个对象映射为一个新的对象，新对象的键值对符合 Excel 表格的列名和内容。
• XLSX.utils.json_to_sheet: 将转换后的 JSON 数据转换为一个工作表（worksheet）。ws 是生成的工作表对象。

2. 创建工作薄：

• XLSX.utils.book_new(): 创建一个新的工作簿（workbook）对象。wb 是生成的工作簿对象。

3. 添加工作表到工作薄：

• XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'): 将工作表 ws 添加到工作簿 wb 中，并命名为 Sheet1。

4. 生成 Excel 文件：

• XLSX.write(wb, { bookType: 'xlsx', type: 'array' }): 将工作簿 wb 写入一个二进制数组（buffer），文件类型为 xlsx。

5. 创建 Blob 对象：

• new Blob([excelBuffer], { type: 'application/octet-stream' }): 将二进制数组 excelBuffer 转换为一个 Blob 对象，类型为 application/octet-stream。

 6. 下载文件：

• saveAs(blob, '统计数据.xlsx'): 使用 saveAs 函数将 Blob 对象保存为文件，文件名为 统计数据.xlsx，并触发下载。

使用总结 

1. 将数据转换为适合 Excel 表格的格式。
2. 创建一个新的工作簿。
3. 将转换后的数据添加到工作簿中。
4. 将工作簿写入二进制数组。
5. 将二进制数组转换为 Blob 对象。
6. 触发文件下载。