//js文件写入
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default{
install(Vue){
//导出excel表的方法(elementui表格外div的id,给文件取得名字)
Vue.prototype.exportFunc = function (el, name) {
// 从表生成工作簿对象
// wb是要导出的表格的json数据
let wb = XLSX.utils.table_to_book(document.getElementById(el));
// 得到二进制字符串作为输出
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
type: 'binary'
});
// 得到blob
let blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'})
// 取名时使用
let date = this.getDates(new Date());
//第一个参数为导出的内容,第二个参数为文件名字
FileSaver.saveAs(blob, date + name + '.xlsx');
}
const s2ab = function (s) {
if (typeof ArrayBuffer !== 'undefined') {
var cuf = new ArrayBuffer(s.length);
var view = new Uint8Array(cuf);
for (var i = 0; i !== s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF;
}
return cuf;
} else {
var cuf = new Array(s.length);
for (var i = 0; i !== s.length; ++i) {
cuf[i] = s.charCodeAt(i) & oxFF;
}
return cuf;
}
}
}
}
//命令行输入
//同时导入file-saver和xlsx的包
npm install file-saver xlsx --save-dev
//main.js中写入
import elxel from './assets/js/elxel'
Vue.use(elxel)
//调用elxel公共方法,exportFunc('要导出表格选择器id','导出表格的名称');
<el-button type="success" @click="exportFunc('listTable','财务清清单')">导出</el-button>
//导出表格的外包裹id选择器
<div id="listTable">
//elementui的表格
</div>
前端实现导出功能
最新推荐文章于 2024-07-30 09:30:00 发布