依赖下载
npm install file-saver -S
npm install xlsx -S
引入依赖包
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
表格设置
<el-button type="primary" icon="el-icon-document" class="daochu" @click="exportExcel">导出</el-button>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;" :row-class-name="tableRowClassName" id="out-table">
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
js
exportExcel() {
/* generate workbook object from table */
let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
/* get binary string as output */
let 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
}
非常简单,有什么问题,请多多指教,感谢!