js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)

之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能，现在再介绍一下如何使用 js-xlsx 进行 excel 导出。

【实现步骤】

1. 首先安装依赖

npm install xlsx --save

2. 在组件中导入 xlsx

import XLSX from 'xlsx';

3. 提供导出按钮，编写导出方法

EXCEL 导出

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');

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() 方法前尝试

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 导出更详细的实现方案，参考

3. 如何通过 xlsx 实现 excel 的导入和解析，参考

【参考资料】

js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)相关推荐

js 前端导出报错格式不正确_vue项目前端导出word文件(bug解决)
摘要:之前项目中导出价格表是由后端实现,前端只需要调用接口下载word即可,后来业务改变比较大,word模版需要一直改动,后端改起来相对麻烦,后来直接前端自己定义模版,实现下载word文档. 一.需要 ...
ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
11g导出报错：EXP-00106: Invalid Database Link Passwords
11g导出报错:EXP-00106: Invalid Database Link Passwords 服务器端:11.2.0.4.0 : 导出客户端:11.2.0.2 报错提示: About to e ...
MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案
2019独角兽企业重金招聘Python工程师标准>>> MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案 MyEclipse导入jquery-1.8. ...
eclipse中对单独JS文件取消报错的处理
eclipse中对单独JS文件取消报错的处理 eclipse中js文件报错的情况,或许大家早已习以为常了,那么有什么好的方法可以将其忽略掉呢?如果你也在寻找此问题,那么本文或许可以帮助到你 - 忽略某 ...
解决nuxt.js新建项目报错的问题
解决nuxt.js新建项目报错的问题参考文章: (1)解决nuxt.js新建项目报错的问题 (2)https://www.cnblogs.com/blueroses/p/8651827.html 备 ...
关于前端接口报错500原因
关于前端接口报错500原因 1.前端与后端入参有出入 2.前端请求头与后端有出入造成, 下面展示一些内联代码片. Content-Type: application/x-www-form-urlen ...
oracle导出报错04063,导出报错：ORA-04063:packagebody“DMSYS.DBMS_DM_MODEL_EXP”hase
导出报错:ORA-04063: package body DMSYS.DBMS_DM_MODEL_EXP has errors Oracle 11.2.0.2 , EBS R12.1.3 因为是升级的 ...
powershell中 find 命令报参数格式不正确
在cmd命令行中查看本地网络连接数 netstat -ant |find /C "192" //注意必须加上引号,否则包参数格式不正确同样的命令在powe ...
【PR】用PR剪辑影片后导出报错：Adobe media Encoder未安装
用PR剪辑影片后导出报错:Adobe media Encoder未安装,这里提供PR CC 2017对应的 Media Encoder安装包,安装后即可正常导出多次尝试无法上传附件,C站对资源大小 ...

js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)

js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)相关推荐

最新文章

热门文章

js 前端导出报错 格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)

js 前端导出报错 格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)相关推荐

最新文章

热门文章

js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)

js 前端导出报错格式不正确_js-xlsx 实现前端 Excel 导出(支持多 sheet)相关推荐