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


    这个功能可能不会经常用到,一般都是服务器传文件过来但是有时候有些文件在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模式下没试过,有更好的方案的话欢迎各位指出

  • 相关阅读:
    Redis学习——数据结构下
    CI 笔记7,easyui 异步加载
    CI 笔记,借鉴的4个辅助自定义函数
    CI笔记6 json 传值
    CI 笔记,使用 json的参考文档(废弃)
    CI 笔记5 (CI3.0 默认控制器,多目录)
    CI 笔记(easyui js命令)
    CI 笔记4 (easyui 手风琴)
    CI 笔记3 (easyui 的layout布局,最小化layout原型)
    CI 笔记3 (easyui 和 js 排错)
  • 原文地址:https://www.cnblogs.com/llcdbk/p/13222783.html
Copyright © 2020-2023  润新知