Vue 批量下载文件

偏执的太偏执、 2023-10-04 11:22 1阅读 0赞

近期在使用vue的项目时，因为公司有个需求需要批量下载文件，刚开始我的想法是使用for循环的方式，创建a标签，然后点击下载，如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTAwNDY5_size_16_color_FFFFFF_t_70]  
但是才发现，只能下载最后一个文件，猜测应该是执行到后面的时候，前面的a标签已经被移除了，  
然后就使用iframe的方式挂载到windows上，然后使用延时器5分钟移除，这很好解决了我的问题。  
![在这里插入图片描述][20210420150239584.png]  
废话不多说，以下是源码

downloadInstructions(obj){
          let instructions = obj.instructions.split(",")
          let i = 0
          for(;i<instructions.length;i++){
            const iframe = document.createElement("iframe");
            iframe.style.display = "none";  // 防止影响页面
            iframe.style.height = 0;  // 防止影响页面
            iframe.src = this.OSS_BASE_URL+instructions[i];
            document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(()=>{
              iframe.remove();
            }, 5 * 60 * 1000);
    
          }
        },

参考文档  
https://blog.csdn.net/weixin\_43799793/article/details/99359841

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTAwNDY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210420150040133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTAwNDY5,size_16,color_FFFFFF,t_70
[20210420150239584.png]: https://img-blog.csdnimg.cn/20210420150239584.png