Download multiple files at a time through the url array in the vue project

Get the url array that needs to be downloaded in the background, the first thing I thought of was to create a tag on the page, and click on the a tag to realize the download

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

Later, I found another bug. The method of looping in can only download the last item of the array.

Later, I changed a method, using iframe to download, and it became?

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

Guess you like

Origin blog.csdn.net/qq_44782585/article/details/123678553