报错解决:版本原因
export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx‘
"file-saver": "^2.0.2",
"xlsx": "^0.16.0"
vue中纯前端vue-json-excel插件实现导出简单Excel表格的功能步骤
暂时没想到多级表头用vue-json-excel插件实现办法
注意点：
1.依赖download.js
2.此组件生成的excel，如果使用office打开，会提示但能打开,用wps可以直接打开
vue下载插件,直接调用方法导出
"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("导出失败");
});
}
},
},