1.先安装 file-saver 、xlsx 组件
npm install file-saver -S
npm intsall xlsx -S
2.html 代码
<el-table :data="elTable" ref="" id="table-content">
<el-table-column label="其他" align="center"></el-table-column>
......
</el-table>
<el-button type="primary" @click="exportExcel">导出 Excel</el-button>
3. js 方法
<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {
data() {
return {elTable:[]}
},
methods:{
/**
* 导出表格数据
* @returns {any}
*/
exportExcel() {
const et = XLSX.utils.table_to_book(document.getElementById('table-content'))
// 此处传入table元素节点,XLSX.utils.table_to_book对传入的数据进行加工,赋值给et
// XLSX.write() 开始编写Excel表格
const etout = XLSX.write(et, {
bookType: 'xlsx', bookSST: true, type: 'array'
})
try {
FileSaver.saveAs(new Blob([etout], {
type: 'application/octet-stream'
}), '导出表格名称.xlsx')
} catch (e) {
this.$message.error('导出失败')
}
return etout
},
}
}
</script>
有不同见解的伙伴可以,一起探讨!