模板存放位置
src/assets/excelTemplate/模板.xls
安装模块包
npm install file-loader --save-dev //开发，Webpack 配置中使用它来处理文件加载
npm i xlsx --save //生产，解析和处理 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的时候，我需要获取它的表头以及里面的数据进行渲染到表格中，在我编辑的时候需要请求Excel的地址，将返回流转JSON也拿里面的表格数据
有空再写…
