js批量下载图片

批量下载图片

 if (obj.event === 'download') {//批量下载
      var arr=[]
      arr.push(obj.data.qrCode)
      arr.push(obj.data.appQrCode)
      for (let i = 0; i < arr.length; i++) {
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none';
          iframe.style.height = 0;
          iframe.src = arr[i];
          // 与前两种方式不同，iframe需要挂载到页面上才能触发请求
          document.body.appendChild(iframe);
          setTimeout(() => {
              iframe.remove();
          }, 1000);
      }
  }

总结：

下载单个文件

1.最简单的方式

window.open(url, '_blank');

2.通过a标签实现

const a = document.createElement('a');
a.href = url; // 文件链接
a.download = name; // 文件名，跨域资源download无效
a.click();
a.remove();

3.通过iframe实现

const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = url;
// 与前两种方式不同，iframe需要挂载到页面上才能触发请求
document.body.appendChild(iframe);
setTimeout(() => {
  iframe.remove();
}, 1000);

批量下载文件

1. window.open看似最简洁，最完美，然而实际执行时却：只成功下载了一两个文件，其余的被当作恶意重定向被拦截了

2. 通过a标签下载
   对于同源文件，通过a标签可以实现批量下载能力
   跨域文件，同样只成功下载了一两个文件，其余文件请求出现canceled

3. 最后是iframe

 for (let i = 0; i < arr.length; i++) {
   const iframe = document.createElement('iframe');
     iframe.style.display = 'none';
     iframe.style.height = 0;
     iframe.src = arr[i];
     // 与前两种方式不同，iframe需要挂载到页面上才能触发请求
     document.body.appendChild(iframe);
     setTimeout(() => {
         iframe.remove();
     }, 1000);
 }

参考： https://juejin.cn/post/6919366680715984909