js表格导出excel，含多个sheet

1. 首先安装

npm install xlsx --save//如果报错请下载最新版本
//比如
npm install xlsx@0.14.5 --save
或者更高

2. 在组件中引用 xlsx

import XLSX from 'xlsx';

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

<el-button type="success" size="mini" @click="btnClickExport">导出</el-button>

4.js部分

            //导出按钮btnClickExport() {let obj = new Object();obj["ProjectNo"] = this.projectNo;obj["ProjectName"] = this.projectName;obj["EasNo"] = this.easNo;obj["EasName"] = this.easName;obj["CashflowRemark"] = this.cashflowRemark;this.reportsDataTitle.push(obj);// this.reportsDataTitle =[] 数据格式在下面var Title = this.reportsDataTitle; var Cash = this.reportsDataCash;//表格var CashFlow = this.reportsDataFlow;//表格var sheet1 = XLSX.utils.json_to_sheet(Title);var sheet2 = XLSX.utils.json_to_sheet(Cash);var sheet3 = XLSX.utils.json_to_sheet(CashFlow);var wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, sheet1, "Title");XLSX.utils.book_append_sheet(wb, sheet2, "Cash");XLSX.utils.book_append_sheet(wb, sheet3, "Cashflow");const workbookBlob = this.workbook2blob(wb);//获取当前时间var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();if (month < 10) {month = "0" + month;}if (day < 10) {day = "0" + day;}var hours = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var nowDate = year.toString() + month.toString() + day.toString() + hours.toString() + minute.toString() + second.toString();this.openDownloadDialog(workbookBlob, 'Cashflow报告_' + nowDate + '.xlsx');},workbook2blob(workbook) {// 生成excel的配置项var wopts = {// 要生成的文件类型bookType: "xlsx",// // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性bookSST: false,type: "binary"};var wbout = XLSX.write(workbook, wopts);// 将字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;return buf;}var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});return blob;},openDownloadDialog(blob, fileName) {if (typeof blob == "object" && blob instanceof Blob) {blob = URL.createObjectURL(blob); // 创建blob地址}var aLink = document.createElement("a");aLink.href = blob;// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file///模式下不会生效aLink.download = fileName || "";var 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);},

注：要导出数据的 json 格式应该是这样的（每个对象代表表格中的一行数据）

reportsDataTitle:[{ProjectNo: '21-10093',ProjectName: '',EasNo: '2021052',EasName: '算单',CashflowRemark: ''
}, {// ...
}]

this.reportsDataTitle 导出效果

导出多个sheet页效果

js表格导出excel，含多个sheet相关推荐

js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
js table表格导出Excel 设置文件名称
一.table表格导出 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
js前端导出excel：json形式的导出
第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...
jQuery表格导出Excel文件以及网页内容导出Word文档
前言: 我在这里给大家介绍一下我们能用代码实现的最简单的两种转换为Excel文件以及Word文档的方法. jQuery表格导出Excel文件先来看看我们的层级划分: 如图所示: demo.css 代 ...
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
前端导出 excel 的需求很多,但市面上好用的库并不多,讲明白复杂使用场景的文章更少. 本文将以文字 + demo 源码的形式,力求讲清楚满足 99% 使用场景的终极 excel 导出方案. 如果项 ...
electron中表格导出excel使用XLSX.writeFile 更改写入位置方法
问题 Vue项目集成为exe程序使用electron,但是在web端可以使用的XLSX.writeFile会调用网页端保存文件API选择保存位置在electron环境下生成的文件自动保存在工作目录 ...
jQuery实现表格导出Excel功能
jQuery实现表格导出Excel功能 jquery实现表格导出Excel功能,这里我们用到jquery的一个小插件:jquery-table2excel jquery-table2excel线上引用 ...
前端提效 - js 批量导出 excel 为zip压缩包
本篇文章主要介绍使用 exceljs.file-saver.jszip实现下载包含多层级文件夹.多个 excel.每个 excel 支持多个 sheet 的 zip 压缩包. 上一篇文章:前端复杂表格 ...
html表格导出excel有几种方式
html表格导出excel有几种方式一. 前后端结合利用 JavaScript 将表格内容转换为 Excel 文件格式,然后通过 Ajax 请求将文件数据发送给后台,再由后台返回该文件数据流,前端 ...

js表格导出excel，含多个sheet

js表格导出excel，含多个sheet相关推荐

最新文章

热门文章