Table of contents
Vue uses Export2Excel to export excel single header and multiple headers
Error resolution: version reason
export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx‘
"file-saver": "^2.0.2",
"xlsx": "^0.16.0"
The vue-json-excel plugin implements export
The pure front-end vue-json-excel plug-in in vue implements the functional steps of exporting a simple Excel table. I
have not thought of the multi-level table header with the vue-json-excel plug-in.
Note:
1. Rely on download.js
2. If the excel generated by this component is opened with office, it will prompt but can be opened, and it can be opened directly with wps
The front end converts the Blob flow file into a file for export
vue download plug-in, directly call method export
"xlsx": "^0.17.0",
"file-saver": "^2.0.5",
"script-loader": "^0.7.2"
methods: {
exportComm() {
// 一级单元格地址
// this.cellAddrs.push(this.getCellAddrForJson(0, 0, 0, 0));
},
getCellAddrForJson(firstRow, lastRow, firstCol, lastCol) {
return {
firstRow: firstRow,
lastRow: lastRow,
firstCol: firstCol,
lastCol: lastCol,
};
},
exportCurrent() {
let fd = new FormData();
var list = this.tableData; //tableData是列表返回的数据数组
if (list.length == 0) {
this.$message({
message: "列表暂无数据",
type: "warning",
});
}
if (list.length > 0) {
fd.append(
"titles[0]/title",
"表头,表头,表头,表头,表头,表头,表头,表头,表头"
);
var list1 = this.cellAddrs; //cellAddrs是data中数组
for (let i = 0; i < list1.length; i++) {
fd.append("cellAddrs[" + i + "]/firstRow", list1[i].firstRow);
fd.append("cellAddrs[" + i + "]/lastRow", list1[i].lastRow);
fd.append("cellAddrs[" + i + "]/firstCol", list1[i].firstCol);
fd.append("cellAddrs[" + i + "]/lastCol", list1[i].lastCol);
}
fd.append("condParam/exportFileFuncCode", "EAS_TJCX_ZDSBYXZTTJ");
// fd.append("condParam/datas", this.tableData);
fd.append(
"condParam/exportFileLogicName",
"com.tl.eas.eepa.biz.ha2OneTgOneZb.ha2OneTgOneZb.zongIndexList06Export"
);
fd.append("condParam/shardNo", this.ruleForm1.shardNo); //查询条件
var list2 = this.$refs["tableForList"].columns; //el-table里绑定的ref值
for (let i = 0; i < list2.length; i++) {
if (list2[i].property) {
fd.append("headers[" + i + "]/header", list2[i].label);
fd.append("headers[" + i + "]/width", list2[i].minWidth + "px");
fd.append("headers[" + i + "]/field", list2[i].property);
}
}
authService
.exportCurrentToExcel(fd)//导出调用的方法
.then((res) => {
// console.log("返回值", res);
// 将文件流转成blob形式
const blob = new Blob([res.data], {
type: "application/vnd.ms-excel",
});
let filename = "导出表格名字.xls";
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
const elink = document.createElement("a");
elink.download = filename;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
})
.catch(() => {
this.$message.error("导出失败");
});
}
},
},