前端多文件下载的问题?

Question

接口可能返回1个或者2个下载地址,key1肯定有,key2有值时下载,遇到的问题是只弹出key2的下载框

// 获取下载地址接口
async onClickDownloadBtn(row) {
  const res = await returnGoodsDownload({ id: row.id })
  this.downloadFun(res.data.key1)
  if (res.data.key2) {
     this.downloadFun(res.data.key2)
  }
},
//下载方法
downloadFun(url) {
      console.log(url)
      const filename = decodeURIComponent(url.split('/').reverse()[0])
      const a = document.createElement('a')
      a.download = filename
      a.href = url + (filename.indexOf('pdf') !== -1 ? '?response-content-type=application/octet-stream' : '')
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }

Answer 1

测试了一下应该是你使用a链接现在的原因, 他应该是只下载了最后一个链接, 使用iframe 下载, 这个方法参考一下:

/**
 * 以iframe的方式实现的多文件下载
 * @param { urls:array } - 需要下载的内容的数组列表,可以只有一条数据。
 */
export const dnLoadMultipleFiles = (urls) => {
  if (typeof urls !== 'object' || urls.length === 0) return
  urls.forEach(item => {
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none' // 防止影响页面
    iframe.style.height = 0 // 防止影响页面
    iframe.src = item
    document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求
    // 5分钟之后删除（onload方法对于下载链接不起作用，就先这样吧）
    setTimeout(() => {
      iframe.remove()
    }, 5 * 60 * 1000)
  })
}