js 文件下载

下载单个文件

一、a 标签直接下载

那就是基于 <a> 标签的下载文件方式，真的是超级简单。使用方法如下：

href: 文件的绝对/相对地址
download: 文件名（可省略，省略后浏览器自动识别源文件名）
<a href='xxx.jpg' download='file.jpg'>下载jpg图片</a>

二、js 创建a 标签下载

实现思路：

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

• 设置它的 href 属性

• 设置它的 download 属性

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

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>

三、如果不用 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)
   }
 })

动态创建iframe

const _createIFrame = (url) => {
    setTimeout(function(){
        let frame = document.createElement('iframe')
        frame.src=url;
        document.appendChild(frame);
        setTimeout(function(){
            document.body.removeChild(frame)
        },1000)
        },100)
    }
}

let fileList = [url1, url2, url3]

const downloadFile = (fileList) => {
    for(let i = 0; i< fileList.length; i++){
        _createIFrame(fileList[i])
    }
}

downloadFile(fileList)