不废话，上小白代码
- 安装相关依赖
主要是两个依赖:(xlsx 和 file-saver)
npm install --save xlsx file-saver
github上详细的参考地址
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js
- 组件里头引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
模板引用示例
3.在对应组件里边methods里边写一个方法
outInfoList(){
let _this = this;
_this.$http
.post("/index/api/getWageList", {
search: JSON.stringify(_this.searchList),
out:1
})
.then(function (response) {
//console.log(response.data.data);
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(response.data.data);//通过json_to_sheet转成单页(Sheet)数据
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), response.data.filename+'.xlsx');
} catch (e)
{
if (typeof console !== 'undefined')
console.log(e, wbout)
}
return wbout
});
}
4.点击导出按钮执行 outInfoList的方法即可 。
<el-form-item>
<el-button size="mini" type="warning" @click="outInfoList()">导出Excle</el-button>
</el-form-item>
参考
https://www.jianshu.com/p/6edf74f65fc1
https://www.jianshu.com/p/044c183edf42
