系统前端采用element ui,现在需要实现一个导出的功能,各种搜索找到XLsx、FileSaver.
CDN方式引入:(网上基本很少CDN引入)
<script src="//cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
以上文件在人口文件中已经全局引入
网上发部分代码如下:
<div id="app">
// 导出
<el-button class="button-down" icon="el-icon-download" @click="exportExcel()" style="float: right">导出</el-button>
// Table
<template>
<el-table
fix
id="tableId"
:data="tab_data"
max-height="370"
style="width: 100%; margin-top: 20px"
:default-sort = "{prop: 'statistical_date', order: 'descending'}"
:cell-style="rowStyle">
<el-table-column
header-align="center"
v-for="(head,index) in tableHeader"
:key="index"
:label="head.label"
:prop="head.key">
<template slot-scope="scope">
<span>{{scope.row[head.key]}}</span>
</template>
</el-table-column>
</el-table>
</template>
</div>
<script>
var Main = {
data() {
return {
···
}
},
methods: {
exportExcel(){
//转换成excel时,使用原始的格式
var xlsxParam = { raw: true };
let fix = document.querySelector(".el-table__fixed");
let wb;
//判断有无fixed定位,如果有的话去掉,后面再加上,不然数据会重复
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector("#tableId").removeChild(fix),xlsxParam);
document.querySelector("#tableId").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
}
var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
try {
FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "关卡付费分布.xlsx"); //文件名
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script>
一切看起来都很完美!!!!!!!
但是执行导出的时候,报错:
FileSaver.saveAs is not a function.saveAs is not a function
难过吧?百度搜,查!发现都没有点头绪
哈哈哈,其实原因就在于全局引用!!!!!!
上边代码中,使用的是
FileSaver.saveAs
找到它,把它改成
window.saveAs
也就是:
try {
window.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "关卡付费分布.xlsx"); //文件名
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
好了,相信这个世界依旧美好!