通過js遍歷下載地址數(shù)組實現(xiàn)多文件下載的問題

由于項目需要，需要實現(xiàn)一個批量下載的功能。

具體流程為，我傳入一個id，從后臺獲取這個id下所有文件的下載地址，通過循環(huán)調用實現(xiàn)批量下載

由于公司找的網盤端不支持跨域訪問，無法通過axios來進行下載，只能通過a標簽的download屬性來進行操作，在實現(xiàn)的過程中遇到了問題。

xxx.vue 文件


              <el-button type="text" class="title" @click="downloads(scope.row)">下載</el-button>
              <a :href="uri" ref="a" download style="display:none">下載</a>

js代碼

    downloads(row) {
      get(row.id).then(res => {
        if (res.data.length > 0) {
          for (const id of res.data) {
            this.$refs.a.href = id
            this.$refs.a.click()
          }
        }
      })
    },

這段代碼在單文件時，每個瀏覽器均下載正常，但是超過1個的時候除了chrom會提示是否允許多文件下載之外，諸如safiri，firefox都只會下載第一個文件。
求教各位大牛如何解決這個問題。

回答

編輯回答

久愛她

我之前也遇到過這種需求，我解決的主要思路是是用iFrame的方式下載多個文件，來解決其他瀏覽器無法同事下載多個文件的問題。
有n個下載鏈接，則創(chuàng)建n個iFrame，并將下載鏈接賦值給iFrame的src屬性即可出觸發(fā)瀏覽器下載，只是需要隱藏這些iFrame。
亂寫個demo，希望有用。

(function (self) {
    var _className = 'multi-download';
    var _multiDownload = function (links) {
        if (!links) return;
        var _links = [];
        if (typeof links == 'string')
            _links.push(links);
        else if (Object.prototype.toString.call(links) === '[object Array]') {
            _links = links;
        }

        _links.forEach(function (link) {
            var iFrame = document.createElement('iframe');
            iFrame.classList.add(_multiDownload.config.className);
            iFrame.src = link;
            iFrame.style.display = 'none';
            self.document.body.appendChild(iFrame);
        }, this);
    }
    _multiDownload.config = { className: _className };
    self.multiDownload = _multiDownload;
})(self);

2017年11月28日 18:30

編輯回答