vue 项目下载本地的 xlsx 文件

下载file-loader包：

npm install file-loader

 文件放在 “src\assets\xlsx\资产管理-数据导入模板.xlsx” ，放在assets中需要配置webpack，如下：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('xlsx')
      .test(/\.xlsx$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[ext]',
        outputPath: 'assets/xlsx/',
        esModule: false,  // 确保这个选项设置为 false
      });
  }
};

vue文件：

<el-link type="primary" style="font-size: 14px" @click="NiuImport">
            下载模板
</el-link>

文件放在 src\assets 中，则需要 require() 引入

    /** 下载模板操作 */
    NiuImport() {
      const fileUrl = require('@/assets/xlsx/资产管理-数据导入模板.xlsx')
      // 创建一个隐藏的链接元素。直接设置 window.location 会导致页面跳转，而使用隐藏的链接元素不会影响当前页面的状态和用户的浏览体验。
      const link = document.createElement('a')
      link.href = fileUrl
      link.download = '资产管理-数据导入模板.xlsx'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

使用隐藏的链接元素好处，1. 直接设置 window.location 会导致页面跳转，而使用隐藏的链接元素不会影响当前页面的状态和用户的浏览体验。

2. 可以使用 download 属性来指定下载文件的名称，这在直接链接下载中无法实现。用户下载的文件名可以与服务器上的文件名不同。

3. 可以复用于多个文件下载，不论是静态文件还是动态生成的文件。