vue项目中通过url数组一次下载多个文件

后台拿到需要下载的url数组,最开始想到的是在页面创建a标签,通过a标签的点击来实现下载

downloadFile(content, filename) {
      // 创建隐藏的可下载链接
      let eleLink = document.createElement('a')
      eleLink.setAttribute('class', 'upload-file')
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', false, false)
      eleLink.download = filename
      eleLink.style.display = 'none'
      // 字符内容转变成blob地址
      // var blob = new Blob([content])
      // eleLink.href = URL.createObjectURL(blob)
      eleLink.href = content
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.dispatchEvent(evt)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    }

后面发现这个又一个bug,通过循环进来的这个方法,只能下载数组最后一条

后面换了一个方法,使用iframe去下载,就成了?

let _this = this
      for (let i = 0; i < _this.exportCrfData.length; i++) {
        const iframe = document.createElement('iframe')
        iframe.style.display = 'none' // 防止影响页面
        iframe.style.height = 0 // 防止影响页面
        iframe.src = _this.exportCrfData[i].url
        document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求
        // 之后删除
        setTimeout(() => {
          iframe.remove()
        }, 1000)
      }

猜你喜欢

转载自blog.csdn.net/qq_44782585/article/details/123678553