【前端】Vue中引入excel模板并下载以及XLSX使用

模板存放位置
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也拿里面的表格数据

有空再写…