在react中使用js-xlsx插件导出多级表头excel

参考文章如下:
使用js-xlsx插件导出多级表头excel
参考文章是在vue中使用的,不过按照原文的方法实际上是运行不起来的,会报错,错误如下:
在这里插入图片描述
点xlsx第2965行发现错误如下:
在这里插入图片描述
经过查找发现在项目目结构中的 /node_module/xlsx 文件夹中有一个jszip.js的文件,在文件中有一段代码如下:

/**
Usage:
   zip = new JSZip();
   zip.file("hello.txt", "Hello, World!").file("tempfile", "nothing");
   zip.folder("images").file("smile.gif", base64Data, {base64: true});
   zip.file("Xmas.txt", "Ho ho ho !", {date : new Date("December 25, 2007 00:00:01")});
   zip.remove("tempfile");

   base64zip = zip.generate();

**/

原来是xlsx.js文件里创建jszip对象的时候大小写错了,于是就把xlsx中 new jszip(); 都改成 new JSZip();
修改过后果然可以输出啦!!
在这里插入图片描述
用的版本如下:

  • “xlsx”: “^0.16.5”
  • “file-saver”: “^2.0.2”
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Pro + React 可以使用 xlsx 库和 FileSaver 库来实现导出多级表头表格的功能。 首先,需要安装 xlsx 和 FileSaver 库: ```bash npm install xlsx file-saver --save ``` 然后,在代码引入这两个库: ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; ``` 接着,在需要导出表格的组件,创建一个函数来生成 Excel 文件。下面是一个生成多级表头表格的示例函数: ```javascript export function exportExcel(data, fileName) { const worksheet = XLSX.utils.json_to_sheet(data); // 设置多级表头 worksheet['!cols'] = [ { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, ]; worksheet['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } }, { s: { r: 0, c: 2 }, e: { r: 0, c: 4 } }, { s: { r: 0, c: 5 }, e: { r: 1, c: 5 } }, { s: { r: 0, c: 6 }, e: { r: 0, c: 8 } }, { s: { r: 0, c: 9 }, e: { r: 1, c: 9 } }, { s: { r: 0, c: 10 }, e: { r: 1, c: 10 } }, ]; // 生成 Excel 文件 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); FileSaver.saveAs(blob, `${fileName}.xlsx`); } ``` 在这个函数,我们首先将数据转换成一个 worksheet 对象。接着,我们设置多级表头,这里使用了 `!cols` 和 `!merges` 属性来设置列宽和合并单元格。最后,我们将 worksheet 对象添加到一个新的 workbook 对象,并将其写入Excel文件。 最后,我们可以在组件的 render 方法使用这个函数来导出表格: ```javascript <button onClick={() => exportExcel(data, 'table')}>导出表格</button> ``` 这样,用户点击这个按钮就可以将表格导出Excel 文件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值