javascript 实现多文件下载

本来接到这个需求后产品也没有告诉我是有数据接口的, 到了后面我快写完的时候后端突然找我发了一个接口给我, 直接直接下载 zip 压缩文件就好了, 我…..白写了, 为了没有白写, 记录一下

正常的逻辑是得到 id 后拼接到 url 上面直接 window.open调用下就可以正常下载了, 但是这个只能支持单个文件下载, 我在循环 id数组时候去调用open方法就没有效果了

a链接下载文件

downloadHandler (reportId) {
  if (reportId) {
      let url = `https://xxxxxx.com/tfd/phoneLoanBlackListReportDownload?Id=${reportId}`
      var a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('target', '_blank')
      a.setAttribute('id', `newWinId${reportId}`)
      // 防止反复添加
      if(!document.getElementById(`newWinId${reportId}`)) {
          document.body.appendChild(a)
      }
      a.click()
      document.body.removeChild(a)
  }
}
// 这样做的目的是模仿用户点击链接地址进行下载, 但是循环时候就不可行了
ids.forEach(id => {
  this.downloadHandler(id)
  // 这样操作只会打开一个窗口, 后面找了些资料有人分享可以使用`iframe`进行下载, 看下面代码
})

iframe 下载多个文件

downloadHandler (url) {
  if (url) {
    setTimeout(() => {
      let id = `newWinId${Date.now()}`
      let iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.className = 'multi-download'
      iframe.setAttribute('src', url)
      iframe.setAttribute('id', id)
      if(!document.getElementById(id)) {
        document.body.appendChild(iframe)
        setTimeout(() => {
          document.body.removeChild(iframe)
        }, 1000)
      }
    }, 1000)
  }
}

// 这样循环调用这个方法的话就可以直接选中多个进行 id 遍历下载了