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);
// 将字符串转ArrayBuffer
function 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页效果