js 实现多文件批量下载

 

关于兼容性问题:

  

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

 

2019.8.19 更 


 

单个文件批量下载 

方法一:H5 新特性

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

  

方法二:js

js 实现的思路是:

1、添加 标签

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

 

2、如果不用 H5 新特性,动态添加 '); 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)
        }
      })

 

 

参考链接:

https://www.npmjs.com/package/ly-downloader
https://www.jianshu.com/p/2e60c15c328a
https://www.jianshu.com/p/5f9027722204
https://segmentfault.com/a/1190000005863250
https://yugasun.com/post/optimize-download-files-in-frontend.html
https://segmentfault.com/q/1010000012022240
https://www.jq22.com/webqd4287

 

转载于:https://www.cnblogs.com/zhangym118/p/11352164.html

你可能感兴趣的:(js 实现多文件批量下载)