下载网站自己的文件(eg:excel)的写法

Posted 2020-12-14 llcdbk

这个功能可能不会经常用到，一般都是服务器传文件过来但是有时候有些文件在PC上不会有性能问题的话还是可以用用的，
因为vue的摇树算法会让没有引用的静态文件都在打包的时候不会放入静态文件夹，所以这里要使用到第三方的一个插件就是copy-webpack-plugin，可以在vue-cli3

const CopyWebpackPlugin = require("copy-webpack-plugin");
  configureWebpack: config => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "./src/assets/files"),
            to: "./files",
            globOptions: {
              ignore: [".*"]
            }
          }
        ]
      })
    );
  }

　　

需要更多配置可以查询npm上的插件文档，这里就是说我要把assets/files这个文件下的excel拷贝到我打包后根目录下的files文件夹
然后在要下载的地方使用iframe进行下载，为什么不用a标签的download是因为考虑到ie的兼容问题，所以写法如下：

 var elemIF = document.createElement("iframe");
      elemIF.src = `${window.location.protocol}//${window.location.host}/files/你的excel或者rar或者什么的`;
      elemIF.style.display = "none";
      document.body.appendChild(elemIF);

　　

这里我没有用window.open(文件的相对路径)
是因为在hash路游下这么干路由也会混乱，而且如果本地配置了proxy的话调用的时候也会出现404的问题好像是去服务端请求了，history模式下没试过，有更好的方案的话欢迎各位指出