JS批量下载文件

js批量下载文件

关于兼容性问题：
<a href="xxx.docx" target='blank'></a>

下载文件时，这种写法是没有兼容性问题；但是下载图片时，IE 上会出现当前页面直接打开图片的问题，即便是加了 target=’blank’。

<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a> 

单个文件批量下载
一、H5 新特性
HTML 5 里面为 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能 ，download 的属性值是可选的，它用来指定下载文件的文件名。 js 实现的思路是：
1、用 JavaScript 创建a标签
实现代码：假设引入了 jquery.js

//用 JavaScript 创建一个隐藏的 <a> 标签  
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'what-you-want.txt';
//设置它的 href 属性  
a.href = url;
//设置它的 download 属性 
a.download = filename;
//用 JavaScript 来触发这个它的 click 事件 
a.click();
a.remove(); // 移除掉 <a>

二、如果不用 H5 新特性，动态添加 <iframe> 会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。

var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
frame.attr('src', url);
$(document.body).append(frame);
setTimeout(function() {
   frame.remove();
 }, 1000);

兼容 IE 360兼容模式：
如果文件不是 .png .gif .jpg 这种照片格式，可采用 window.open(url,’blank’) 下载。

 function isIE() {
   if (!!window.ActiveXObject || 'ActiveXObject' in window) {
     return true
   } else {
     return false
   }
 },
 function download() {
   let url = '../../../static/cds/files/研究方案及团队情况表.docx'
   if (this.isIE()) { // IE
     window.open(url, 'blank')
   } else {
     let a = document.createElement('a') // 创建a标签
     let e = document.createEvent('MouseEvents') // 创建鼠标事件对象
     e.initEvent('click', false, false) // 初始化事件对象
     a.href = url // 设置下载地址
     a.download = 'xxxx表' // 设置下载文件名
     a.dispatchEvent(e)
   }
 },

批量下载多个文件： 思路：将 url 放在一个数组里，循环数组并触发下载：

  let files = ['url1', 'url2'] // 所有文件
  files.forEach(url => {
    if (this.isIE()) { // IE
      window.open(url, 'blank')
    } else {
      let a = document.createElement('a') // 创建a标签
      let e = document.createEvent('MouseEvents') // 创建鼠标事件对象
      e.initEvent('click', false, false) // 初始化事件对象
      a.href = url // 设置下载地址
      a.download = '' // 设置下载文件名
      a.dispatchEvent(e)
    }
  })

参考链接： http://blog.ncmem.com/wordpress/2019/08/28/php文件批量下载/
参考链接： https://www.cnblogs.com/songsu/p/11303697.html
参考链接： http://blog.ncmem.com/wordpress/category/泽优产品