js 前端实现将json格式数组下载到excel(xls、xlsx、csv)表格里
项目需求：上传文件时如果有错误信息，则上传不成功，需要提示用户下载查看错误信息。下载查看错误信息是前端根据后台返回的对象数组放到excel表格中的。
后台返回的数组：
效果如下：
在开始之前先要了解一下几个excel格式的区别：
1.后缀是xls的在2007版本之后的office打开会有提示(xls在wps上打开没有提示)
2.后缀是xlsx在2007版本之后的打开没有提示，但是在2007之前的版本会打不开
3.csv是最通用的一种文件格式，它可以非常容易的被导入各种pc表格及数据库中，此文件中一行即为数据表的一行。生成数据表字段用半角逗号隔开。但是csv不能设置样式。
第一种：生成xls
代码如下：
// 错误信息下载exportEx = val => { // val:需要导出的json数据let JSONData = val;let ShowLabel = ['序号', 'imei', '错误原因']; // 导出的excel的表头数据//先转化jsonlet arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;// 给数组内容换好位置let finalData = []; // 最终要导出的json数据，其中json数据顺序要和表头数据顺序一致arrData.forEach(item => {let obj = {rowNum: item.rowNum,imei: item.imei ? item.imei : '',errorMsg: item.errorMsg,};finalData.push(obj);});let excel = '<table>';//设置表头let row = '<tr>';for (let i = 0; i < ShowLabel.length; i++) {row += '<td>' + ShowLabel[i] + '</td>';}//换行excel += row + '</tr>';//设置数据for (let i = 0; i < finalData.length; i++) {let row = '<tr>';for (let index in finalData[i]) {let value = finalData[i][index];if (index === 'imei') {// 当数字超过一定长度就科学计数法可以使用style='mso-number-format:"\@"'// 这个属性指定某单元格的数据格式，避免Excel自动转换格式row += `<td style='mso-number-format:\"\\@\"'>${value}</td>`;} else {row += '<td>' + value + '</td>';}}excel += row + '</tr>';}excel += '</table>';let excelFile ="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";excelFile +='<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';excelFile += '; charset=UTF-8">';excelFile += '<head>';excelFile += '<!--[if gte mso 9]>';excelFile += '<xml>';excelFile += '<x:ExcelWorkbook>';excelFile += '<x:ExcelWorksheets>';excelFile += '<x:ExcelWorksheet>';excelFile += '<x:Name>';excelFile += '{worksheet}';excelFile += '</x:Name>';excelFile += '<x:WorksheetOptions>';excelFile += '<x:DisplayGridlines/>';excelFile += '</x:WorksheetOptions>';excelFile += '</x:ExcelWorksheet>';excelFile += '</x:ExcelWorksheets>';excelFile += '</x:ExcelWorkbook>';excelFile += '</xml>';excelFile += '<![endif]-->';excelFile += '</head>';excelFile += '<body>';excelFile += excel;excelFile += '</body>';excelFile += '</html>';let uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);let link = document.createElement('a');link.href = uri;link.style = 'visibility:hidden';link.download = '错误数据文件.xls';document.body.appendChild(link);link.click();document.body.removeChild(link);message.success('下载成功！');this.setState({errorMsgVisible: false,});};
补充：在导出的excel中较长的数字会变成科学计数法展示，为了让过长的数字全部展示出来需要添加样式：style="mso-number-format:'\@';"
在代码中"\@"中的引号和反斜杠都需要添加转义符才能使用。
第二种：生成xlsx
需要引入js-xlsx插件
1.使用npm install xlsx
2.并在文件中引入 import XLSX from 'xlsx';
代码如下：
// 错误信息下载exportEx = val => { // val：需要导出的json数据let JSONData = val;let ShowLabel = ['序号', 'imei', '错误原因']; // 导出的excel的表头数据//先转化jsonlet arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;// 给数组内容换好位置let finalData = []; // 最终要导出的json数据，其中json数据顺序要和表头数据顺序一致arrData.forEach(item => {let obj = {rowNum: item.rowNum,imei: item.imei ? item.imei : '',errorMsg: item.errorMsg,};finalData.push(obj);});let excel = '<table>';//设置表头let row = '<tr>';for (let i = 0; i < ShowLabel.length; i++) {row += '<td>' + ShowLabel[i] + '</td>';}//换行excel += row + '</tr>';//设置数据for (let i = 0; i < finalData.length; i++) {let row = '<tr>';for (let index in finalData[i]) {let value = finalData[i][index];if (index === 'imei') {// 当数字超过一定长度就科学计数法可以使用style='mso-number-format:"\@"'// 这个属性指定某单元格的数据格式，避免Excel自动转换格式row += `<td style='mso-number-format:\"\\@\"'>${value}</td>`;} else {row += '<td>' + value + '</td>';}}excel += row + '</tr>';}excel += '</table>';// 因为我们这里的数据是string格式的,但是js-xlsx需要dom格式,则先新建一个div然后把数据加入到innerHTML中,在传childNodes[0]即使dom格式的数据let objE = document.createElement('div');objE.innerHTML = excel;// 将一个table对象转换成一个sheet对象,raw为true的作用是把数字当成string,身份证不转换成科学计数法let sheet = XLSX.utils.table_to_sheet(objE.childNodes[0], { raw: true });this.openDownloadDialog(this.sheet2blob(sheet, '错误数据文件'), '错误数据文件.xlsx');};sheet2blob = (sheet, sheetName) => {sheetName = sheetName || 'sheet1'; // 不存在sheetName时使用sheet1代替let workbook = {SheetNames: [sheetName],Sheets: {},};workbook.Sheets[sheetName] = sheet; // 生成excel的配置项let wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary', // 二进制格式};let wbout = XLSX.write(workbook, wopts);let blob = new Blob([this.s2ab(wbout)], {type: 'application/octet-stream',}); // 字符串转ArrayBufferreturn blob;};s2ab = s => {let buf = new ArrayBuffer(s.length);let view = new Uint8Array(buf);for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;return buf;};openDownloadDialog = (url, saveName) => {if (typeof url === 'object' && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}let aLink = document.createElement('a');aLink.href = url;aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效let event;if (window.MouseEvent) event = new MouseEvent('click');else {event = document.createEvent('MouseEvents');event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);}aLink.dispatchEvent(event);message.success('下载成功！');this.setState({errorMsgVisible: false,});};
第二种：生成csv
参考链接：https://blog.csdn.net/qq_35493664/article/details/88896638?utm_medium=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-1.nonecas
js 前端实现将json格式数组下载到excel(xls、xlsx、csv)表格里相关推荐
- json格式数据下载为excel方法，其中数字格式下载后排序正常
/** @file 下载功能* @author whyme23@163.com */const jsonToExcelConvertor = (jsonData, ShowLabel, fileNam ...
- 前端展示json格式数组
前端展示json格式数组 展示效果 实现 展示效果 实现 <div class="tab-table"><div style="height: 16px ...
- HTML页面之间传递Json格式数组的方式
HTML页面之间传递Json格式数组的方式 如下: a.html localStorage.setItem("userinfoList", JSON.stringify(list) ...
- ajax前端post请求json格式参数,前端js导出,参数以json格式发送post请求
//下载excel文件 downLoadFile(url: any, data: any, fileName: any) { let other=this;//other.messageService ...
- js 前端导出报错 格式不正确_vue项目前端导出word文件(bug解决)
摘要:之前项目中导出价格表是由后端实现,前端只需要调用接口下载word即可,后来业务改变比较大,word模版需要一直改动,后端改起来相对麻烦,后来直接前端自己定义模版,实现下载word文档. 一.需要 ...
- php将字符串转换为json格式,js中将字符串转换为json格式的三种方法
json在js的开发过程中经常会用到,像在使用ajax开发的项目过程中,经常需要将json格式的字符串返回到前端,前端解析成json对象. 下面为大家介绍下将字符串转换为json对象的三种常用的方法: ...
- Java如何处理前端传来的json格式的数据并将它转化为相应的对象，然后进行使用
我是小康小白,一个平平无奇的Java小白.热爱有趣的文字,生活和远方. 前端传来json格式的数据传递而来,如何处理json格式的数据,如何将其转化为对象方便进行操作,并在Servlet页面中将数据以 ...
- JS中循环遍历JSON格式数据
//res为json格式数据 if (res != null) { //循环遍历resfor (var key in res) { //遍历中key为字段名的字符串,如{"a":& ...
- javascript解析json格式的字符串，拼接后显示到表格中
知识点 解析json格式的字符串 拼接的HTML设置到tbody当中 加载json格式的对象 结果演示 html代码 <!DOCTYPE html> <html><hea ...
最新文章
- 白盒测试的5种逻辑覆盖法
- 设计模式-创建型模式-建造者模式
- Ansible简单介绍及安装部署详解
- C++日志系统log4cxx使用总结
- developer pack_上汽大众MEB电池Pack制造车间
- 1001种玩法 | 1001种玩法--数据存储（2)
- 专访阿里数据库备份专家 教你pick最有效的备份系统
- android studio syso快捷键,AndroidStudio代码段简写Live Template
- python安装盒怎么打开_安装MySQL-python报错
- 论坛模块_版块管理_增删改查实现上下移动
- Python内置函数(28)——hash
- XML Notepad 2007 汉化版发布
- ADAMS并联机器人动力学仿真【附源文件】
- 绘制双Y轴坐标系及其设置
- Android开发--更换字体
- 单页面应用与多页面的区别与优缺点
- openwrt作旁路由配置教程
- 003-photoshop快速去掉图片背景颜色、签名放到指定文档合成图片
- OpenCV中LBPH人脸识别器识别人脸实战（附Python源码）
- 在iPhone上如何备份WhatsApp数据