安裝xlsx，一定要注意版本：?
npm i xlsx@0.17.0 -Spackage.json：
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"element-ui": "^2.15.12",
"file-saver": "^2.0.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"xlsx": "^0.17.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-plugin-component": "^1.1.1",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11"
}
}
App.vue：
<template>
<div id="app">
<el-button type="primary" @click="exportExcel">vue xlsx導(dǎo)出多sheet excel</el-button>
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
methods: {
exportExcel() {
var data1 = [
["id", "name", "hot"],
[1, "C++", 99],
[2, "JavaScript", 98]
];
var data2 = [
["id", "語(yǔ)言", "熱度"],
[1, "C++", 99],
[2, "JavaScript", 98]
];
const ws1 = XLSX.utils.aoa_to_sheet(data1);
const ws2 = XLSX.utils.aoa_to_sheet(data2);
/* generate workbook and add the worksheet */
const wb = XLSX.utils.book_new();
// XLSX.utils.book_append_sheet(wb, ws, "test");
XLSX.utils.book_append_sheet(wb, ws1, "月度統(tǒng)計(jì)報(bào)表");
XLSX.utils.book_append_sheet(wb, ws2, "隔離庫(kù)");
/* save to file */
XLSX.writeFile(wb, "test.xlsx");
}
}
};
</script>
設(shè)置單元格寬度：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-731588.html
const ws = XLSX.utils.aoa_to_sheet(data1);
// 每列不同寬度px
const wscols = [
{ wch: 5 },
{ wch: 60 },
{ wch: 25 }
];
ws["!cols"] = wscols;?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-731588.html
到了這里，關(guān)于vue中使用xlsx插件導(dǎo)出多sheet excel實(shí)現(xiàn)方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
