js 实现多文件批量下载

时间：2024-03-06 19:52:00

 

关于兼容性问题：

　　<a href="xxx.docx" target=\'_blank\'></a>

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

 

2019.8.19 更 

 

单个文件批量下载 

方法一：H5 <a> 新特性

　　HTML 5 里面为 <a> 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能。download 的属性值是可选的，它用来指定下载文件的文件名。

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

　　

方法二：js

js 实现的思路是：

1、添加 <a>标签

  • 用 JavaScript 创建一个隐藏的 <a> 标签

  • 设置它的 href 属性

  • 设置它的 download 属性

  • 用 JavaScript 来触发这个它的 click 事件

实现代码：假设引入了 jquery.js

var a = document.createElement(\'a\');
var url = window.URL.createObjectURL(blob);
var filename = \'what-you-want.txt\';
a.href = url;
a.download = filename;
a.click();
a.remove(); // 移除掉 <a>

 

2、如果不用 H5 新特性，动态添加 <iframe>

　　会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。

1 var frame = $(\'<iframe style="display: none;" class="multi-download"></iframe>\');
2 frame.attr(\'src\', url);
3 $(document.body).append(frame);
4 setTimeout(function() {
5   frame.remove();
6 }, 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)
        }
      })

 

 

参考链接：

 

相关文章