vue+elementUI表格导出excel
参考小圣贤君最终效果点击导表跳出导出文件实现过程1.先安装依赖npm install --save xlsx file-saver2.在需要的组件内引入import FileSaver from "file-saver";import XLSX from "xlsx";3.使用---必须保证表格格式对应,不然报错 我用了布局来写的表格,然后...
·
参考小圣贤君
最终效果
点击导表
跳出导出文件
实现过程
1.先安装依赖
npm install --save xlsx file-saver
2.在需要的组件内引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
3.使用---必须保证表格格式对应,不然报错
我用了布局来写的表格,然后就会报这个错
好吧,来看看正确的写法
<template>
<div>
<!-- 导出按钮 -->
<div class="toexcel">
<el-button @click="exportExcel" type="primary" class="button" style="width:70px;position:absolute;top:0;right:30px">导出</el-button>
</div>
<el-table
class="table"
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
js
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
// 导出表格所用
exportExcel() {
// 设置当前日期
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1;
let day = time.getDate();
let name = year + "" + month + "" + day;
// console.log(name)
/* generate workbook object from table */
// .table要导出的是哪一个表格
var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
// name+'.xlsx'表示导出的excel表格名字
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
name + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
}
};
</script>
css
<style scoped>
/* 导出按钮 */
.toexcel {
cursor: pointer;
cursor: hand;
width: 70px;
height: 34px;
}
</style>
可以直接用,菜鸟欢迎大神指点
更多推荐
已为社区贡献12条内容
所有评论(0)