一、安裝 xlsx
npm install --save xlsx file-saver
二、具體使用整體代碼文章來源：http://www.zghlxwxcb.cn/news/detail-738375.html
如果數(shù)據(jù)格式是這樣就用下面的，直接把數(shù)據(jù)傳到 XLSX.utils.json_to_sheet文章來源地址http://www.zghlxwxcb.cn/news/detail-738375.html
list: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
// ...
]
<template>
<button @click="exportData">導(dǎo)出數(shù)據(jù)</button>
</template>
import * as XLSX from 'xlsx'
methods: {
// 導(dǎo)出當(dāng)前界面列表
exportData() {
const data = [
{
"事假": "0.0/5.0",
"護(hù)理假": "0.0/0.0",
"婚假": "0.0/5.0",
"申請人":"張三"
},
{
"事假": "0.0/5.0",
"護(hù)理假": "0.0/0.0",
"婚假": "0.0/5.0",
"申請人":"李四"
}
];
const dataTitles = ['申請人', '事假', '婚假', '護(hù)理假'];
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')
},
// 保存數(shù)據(jù)并且導(dǎo)出
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()
}
}
到了這里，關(guān)于Vue xlsx插件前端導(dǎo)出的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
