vue导出Excel表格,报错utils of undefined 是版本原因
搞了半天原来是版本的原因操作步骤:1、安装相关的依赖;(xlsx,file-saver)执行命令:npm install --save xlsx file-saver安装成功之后发现项目报错,一直提示until这个东西没有定义,查了好多一直以为是机子vue2和vue3同时存在的原因,最后发现不是,原来是版本原因解决办法:utils未定义的话需要换一下版本npm install --save xls
·
搞了半天原来是版本的原因
操作步骤:
1、安装相关的依赖;(xlsx,file-saver)
执行命令:
npm install --save xlsx file-saver
安装成功之后发现项目报错,一直提示until这个东西没有定义,查了好多一直以为是机子vue2和vue3同时存在的原因,最后发现不是,原来是版本原因
解决办法:
utils未定义的话需要换一下版本
npm install --save xlsx@0.17.0
npm install --save file-saver@2.0.5
2.给表格添加ref属性或者给表格添加id
<el-table
:span-method="arraySpanMethod"
:header-cell-style="{background:'#315392',color:'#fff'}"
:data="tableData"
border
height="400"
style="width: 100%;height:100%;overflow:auto;"
v-loading="loading"
id="table1"
>
.....
</el-table>
<table ref="exportTableRef"> ... </table>
3 在组件中引入依赖
表格使用ref的代码段
// 引入导出表格的依赖包
import XLSX from "xlsx";
import FileSaver from "file-saver";
//点击导出
<a-button @click="exportBtn">导出</a-button>
//methods方法
exportBtn () {
// 获取表格元素
const els = this.$refs.exportTableRef;
// 文件名
const filename = "核销订单.xlsx";
/* generate workbook object from table */
const wb = XLSX.utils.table_to_book(els);
/* 或者用id */
// const wb = XLSX.utils.table_to_book(document.getElementById("id"))
/* get binary string as output */
const wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
filename
);
} catch (e) {
console.log(e);
}
return wbout;
},
表格使用id的代码段
//定义导出表格触发事件,需要传入要导出的表格id
exportExcel(id) {
let wb = XLSX.utils.table_to_book(document.querySelector("#"+id), {
raw: true,//如果表格里有数字、日期这些、需要加上raw: true
});
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象。
new Blob([wbout], { type: "application/octet-stream" }),
// 设置导出文件名称
"xxx.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
记得要引入依赖包哦!
ps:安装依赖过程中发现file-saver这个依赖包一直安装在本地C盘typescript下面的node-moudle中,没有明白什么原因,因为本地项目是在E盘,有知道的大神请指教一下感谢!
更多推荐
已为社区贡献2条内容
所有评论(0)