Vue+element 实现文件导出xlsx格式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

傻瓜教程：

第一步：安装两个依赖包

npm install --save xlsx file-saver

第二步：建立一个Vue文件，导入以下代码即可

<template>
<div>
<el-table :data="tableData" style="width: 100%" id="aa">
<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>
<el-button @click="exportExcel">导出</el-button>
</div>
</template> <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 () {
alert("fdajsfguia")
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector('#aa'))
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'love you.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
}
}
}
</script>