一、安装 xlsx
npm install --save xlsx file-saver
二、具体使用整体代码文章来源：https://www.toymoban.com/news/detail-738375.html
如果数据格式是这样就用下面的，直接把数据传到 XLSX.utils.json_to_sheet文章来源地址https://www.toymoban.com/news/detail-738375.html
list: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// ...
]
<template>
<button @click="exportData">导出数据</button>
</template>
import * as XLSX from 'xlsx'
methods: {
// 导出当前界面列表
exportData() {
const data = [
{
"事假": "0.0/5.0",
"护理假": "0.0/0.0",
"婚假": "0.0/5.0",
"申请人":"张三"
},
{
"事假": "0.0/5.0",
"护理假": "0.0/0.0",
"婚假": "0.0/5.0",
"申请人":"李四"
}
];
const dataTitles = ['申请人', '事假', '婚假', '护理假'];
const rows = [];
for (const item of data) {
const entry = {};
for (const title of dataTitles) {
if (Object.prototype.hasOwnProperty.call(item, title)) {
entry[title] = item[title];
} else {
entry[title] = '';
}
}
rows.push(entry);
}
const worksheet = XLSX.utils.json_to_sheet(rows)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const fileBuffer = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })
this.saveFile(fileBuffer, 'data.xlsx')
},
// 保存数据并且导出
saveFile(buffer, fileName) {
const blob = new Blob([buffer], { type: 'application/octet-stream' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = fileName
link.click()
}
}
到了这里，关于Vue xlsx插件前端导出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
