js 實現多文件批量下載

時間 2019-11-20

標籤實現文件批量下載欄目 JavaScript 简体版

原文原文鏈接

關於兼容性問題：

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

　　下載文件時，這種寫法是沒有兼容性問題；可是下載圖片時，IE 上會出現當前頁面直接打開圖片的問題，即使是加了 target='_blank'。html

2019.8.19 更 java

單個文件批量下載

方法一：H5 <a> 新特性

　　HTML 5 裏面爲 <a> 標籤添加了一個 download 的屬性，咱們能夠輕易的利用它來實現下載功能。download 的屬性值是可選的，它用來指定下載文件的文件名。jquery

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

方法二：js

js 實現的思路是：web

一、添加 <a>標籤

用 JavaScript 建立一個隱藏的 <a> 標籤npm
設置它的 href 屬性segmentfault
設置它的 download 屬性數組
用 JavaScript 來觸發這個它的 click 事件app

實現代碼：假設引入了 jquery.jsfrontend

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>

　　會獨立打開一個窗口，發起該請求，當請求完成後，該界面會自動關閉。

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)
        }
      })