模板存放位置
src/assets/excelTemplate/模板.xls
安裝模塊包
npm install file-loader --save-dev //開發(fā)，Webpack 配置中使用它來處理文件加載
npm i xlsx --save //生產(chǎn)，解析和處理 Excel 文件的庫
新增配置，在vue.config.js中，自己比較一下，最后一段新增的chainWebpack
module.exports = defineConfig({
transpileDependencies: true,
assetsDir: 'static', //打包配置文件
parallel: false,
publicPath: './',
devServer: {
port: port,
open: true,
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
},
},
},
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
},
},
},
chainWebpack(config) {
config.module
.rule('excel')
.test(/\.(xls|xlsx)$/)
.use('file-loader')
.loader('file-loader')
.options({
name: '[name].[ext]',
})
.end()
},
})
即可將模板下載到本地
<template>
<el-button @click="downloadFile" icon="el-icon-download">下載配置模板</el-button>
</template>
<script>
import excelFile from '@/assets/excelTemplate/模板.xls'
export default {
data() {
return {}
},
methods: {
//下載
downloadFile() {
const link = document.createElement('a')
link.href = excelFile
link.download = '模板.xls'
link.style.display = 'none' // 隱藏元素
document.body.appendChild(link) // 添加到文檔中
link.click()
document.body.removeChild(link) // 點擊后移除
},
},
}
</script>
<style>
</style>
我使用XLSX的場景，在我上傳excel的時候，我需要獲取它的表頭以及里面的數(shù)據(jù)進行渲染到表格中，在我編輯的時候需要請求Excel的地址，將返回流轉(zhuǎn)JSON也拿里面的表格數(shù)據(jù)文章來源：http://www.zghlxwxcb.cn/news/detail-832478.html
有空再寫…文章來源地址http://www.zghlxwxcb.cn/news/detail-832478.html
到了這里，關(guān)于【前端】Vue中引入excel模板并下載以及XLSX使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
