react exceljs

ExcelJS 4.2.0:创建动态工作表与导出Excel文件
本文介绍了如何使用ExcelJS库在Node.js中创建工作表,设置样式,添加数据,合并单元格,并最终将数据导出为Excel文件。重点展示了如何配置列宽和单元格对齐方式。

"exceljs": "^4.2.0",

npm install exceljs

import {Workbook} from 'exceljs';

const workbook = new Workbook;

const sheet = workbook.addWorksheet('Sheet1', {properties:{defaultRowHeight:25}});
        sheet.pageSetup.horizontalCentered = true;
        sheet.pageSetup.verticalCentered = true;
        sheet.columns = [
            {header:'title1',key:'title1',width: 25,style:{alignment:{vertical:'middle',horizontal:'center'}}},
            {header:'title2',key:'title2',width: 25,style:{alignment:{vertical:'middle',horizontal:'center'}}},
            {header:'title3',key:'title3',width: 30,style:{alignment:{vertical:'middle',horizontal:'center'}}},
        ];

sheet.addRow({title1: '111',
                                title2: '222',
                                title3: '333',
                            });

sheet.addRow({title1: '444',
                                title2: '555',
                                title3: '666',
                            });

sheet.mergeCells(1,1,2,2);

workbook.xlsx.writeBuffer().then((buffer) => {
                writeFile('Capability.xlsx', buffer);
            });

const writeFile = (fileName, content) => {
            let a = document.createElement("a");
            let blob = new Blob([content], { type: "text/plain" });
            a.download = fileName;
            a.href = URL.createObjectURL(blob);
            a.click();
        };

 

ref:https://github.com/exceljs/exceljs/blob/master/README_zh.md

在使用 React.js 实现 Excel 文件下载时,文件损坏可能是由于下载过程中的数据完整性未得到保障,或在文件传输过程中未正确处理二进制流所导致。以下是一些常见的解决方案: ### 1. 确保正确的响应类型设置 在使用 `fetch` 或 `XMLHttpRequest` 请求 Excel 文件时,确保服务器返回的响应类型为 `blob`。这样可以确保浏览器正确处理二进制数据流,避免数据损坏。 ```javascript fetch('/api/download-excel') .then(response => response.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'example.xlsx'; a.click(); window.URL.revokeObjectURL(url); }); ``` ### 2. 检查后端文件生成逻辑 确保后端生成 Excel 文件时没有错误,例如数据写入不完整、文件未正确关闭等。若使用 `xlsx` 或 `exceljs` 等库生成文件,需确保数据正确序列化并写入流中。 ### 3. 使用 Axios 下载文件并设置响应类型 Axios 可以更方便地配置响应类型为 `blob`,从而确保下载的文件不会因数据格式错误而损坏。 ```javascript import axios from 'axios'; axios.get('/api/download-excel', { responseType: 'blob', }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'example.xlsx'); document.body.appendChild(link); link.click(); link.remove(); }); ``` ### 4. 避免使用 Mock 造成的文件损坏 如果在开发环境中使用了 `mock` 数据,可能导致文件内容被错误地模拟或篡改,从而造成文件损坏。可以参考以下方式禁用 mock 或确保其正确模拟文件流 [^3]。 ```javascript // 禁用 mock 对 XHR 的影响 if (!this.match) { this.custom.xhr.responseType = that.responseType; this.custom.xhr.send(data); return; } ``` ### 5. 检查文件上传与下载逻辑的一致性 若文件是通过分片上传后再下载,需确保所有分片完整合并,并在下载时保持文件结构完整 [^2]。可以通过校验文件大小或哈希值来确保数据一致性。 ### 6. 使用第三方库处理 Excel 文件 推荐使用 `xlsx` 或 `exceljs` 库进行 Excel 文件的生成和解析,以确保文件格式的正确性。 ```bash npm install xlsx ``` 示例代码: ```javascript import * as XLSX from 'xlsx'; const exportToExcel = (data, filename) => { const worksheet = XLSX.utils.aoa_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); XLSX.writeFile(workbook, `${filename}.xlsx`); }; ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值