js-xlsx 实现前端 Excel 导出(支持多 sheet)
时间:2019-11-13
本文章向大家介绍js-xlsx 实现前端 Excel 导出(支持多 sheet),主要包括js-xlsx 实现前端 Excel 导出(支持多 sheet)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能,现在再介绍一下如何使用 js-xlsx 进行 excel 导出。
【实现步骤】
1. 首先安装依赖
npm install xlsx --save
2. 在组件中导入 xlsx
import XLSX from 'xlsx';
3. 提供导出按钮,编写导出方法
<Button type='primary' onClick={this.handleExport}>EXCEL 导出</Button>
handleExport = () => { const sheetData1 = data1.map(item => ({ 'ID': item.id, '收件人': item.name, '手机号': item.phone, '扫描时间': item.scanTime, })); // 支持多 sheet // const sheetData2 = data2.map(item => ({ // // 在这里设置表头和对应项的值 // })); // const sheetData3 = data3.map(item => ({ // // 在这里设置表头和对应项的值 // })); // ... const sheet1 = XLSX.utils.json_to_sheet(sheetData1); // 支持多 sheet // const sheet2 = XLSX.utils.json_to_sheet(sheetData2); // const sheet3 = XLSX.utils.json_to_sheet(sheetData3); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, sheet1, '收件人列表'); // 支持多 sheet // XLSX.utils.book_append_sheet(wb, sheet2, '表格 sheet2'); // XLSX.utils.book_append_sheet(wb, sheet2, '表格 sheet2'); const workbookBlob = workbook2blob(wb); // 导出最后的总表 openDownloadDialog(workbookBlob, '收件人列表.xlsx'); }
注:要导出数据的 json 格式应该是这样的(每个对象代表表格中的一行数据)
[{ id: '1', name: '张三丰', phone: '16834567890', }, { // ... }]
【效果演示】
点击右上角导出按钮,浏览器会自动下载表格文件,如下:
打开表格,查看数据,发现页面中的表格数据和导出内容一致,并且已经按照设置的中文字段显示了。
【问题解决】
1. 如果在导出过程中浏览器报错:XLSX.utils.json_to_sheet is not a function , 可能是因为 xlsx 版本问题导致的,在调用 XLSX.utils.json_to_sheet() 方法前尝试 打印 xlsx 的版本号:
console.log(XLSX.version)
经过简单排查,应该是 0.8.8 以下版本不支持 json_to_sheet() 方法,所以直接升级 xlsx 到最新版(目前是 0.14.5 )就可以了。
npm install xlsx@0.14.5 --save
2. 以上只演示了单个 sheet 导出的实现和效果,并且简单给出了多 sheet 导出的实现方案( handleExport 方法中注释部分),关于多 sheet 导出更详细的实现方案,参考 展示 用xlsx库 导出excel,含多个sheet。
3. 如何通过 xlsx 实现 excel 的导入和解析,参考 React读取Excel——js-xlsx 插件的使用。
【参考资料】
1.
原文地址:https://www.cnblogs.com/wx1993/p/11847225.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于operator sdk编写k8s自定义资源管理应用
- CAN总线之ISO15765协议
- Linux文本编辑命令
- UCOSii的理解和应用之消息队列
- Linux 编写Shell脚本
- Linux文件权限与归属、文件的特殊权限、文件的隐藏属性
- Linux文件访问控制列表、su命令与sudo服务
- GPS之 NMEA-0183协议
- Zeppelin 安装与初体验
- Hive 安装与配置
- 如何将SAP Cloud for Customer的扩展字段放置到Embedded Component中
- pthread的使用
- shell程序设计
- SAP CDS view权限控制实现原理介绍
- shell程序设计的流程控制