<!--按装依赖-->
npm install --save xlsx file-saver
<!--html-->
<div id="exportTab">
<el-table :data="tableData" 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>
<button @click="exportExcel">下载</button>
</div>
<!--引入依赖-->
<!--引入依赖-->
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
<!--js-->
1、data数据
<!--js-->
1、data数据
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 弄',
},
],
}
},
2、methods函数
2、methods函数
methods: {
exportExcel() {
var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
var wb = XLSX.utils.table_to_book(
document.querySelector('#exportTab'),
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
},
},
注： 本效果只能到处当前页面展示的数据
注： 本效果只能到处当前页面展示的数据