如何在Vue中将数据导出成Excel
1.下载xlsx插件
$ npm install xlsx
$ npm i xlsx -S
2.在组件中调用该插件
// 在调用的组件中引入(全局引入在这里无法调用)
import XLSX from 'xlsx'
data () {
return {
// 列表数据
tableData: [],
// 导出Excel数据
data: [
['id', 'name', 'value'],
[1, 'sheetjs', 7262],
[2, 'js-xlsx', 6969]
]
}
},
methods: {
// 处理EXCEL数据,该方法挂载到请求列表数据的回调函数中
makeExcelData () {
const excelTite = [
'ID',
'标题',
'作者',
'描述',
'封面',
'创建时间',
'阅读次数',
'详细内容'
]
this.data = [excelTite]
this.tableData.forEach((art) => {
this.data.push(Object.values(art))
})
},
// 导出EXCEL数据
exportExcel () {
// 处理数据
const worksheet = XLSX.utils.aoa_to_sheet(this.data)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'SheetJS')
// 导出的excel表的名字
XLSX.writeFile(workbook, '自定义名字.xlsx')
}
}
3.将exportExcel方法挂载到一个事件上后就行了