完成vue的批量下载的功能

Question

这个是我下载文件的方法，我还需要一个批量下载的功能，是一个按钮的，哪位可告知一下
dowloadAgencyattach(data) {
      let fileIndex = data.fileRealName.lastIndexOf('/') + 1;
      let fileRealNewName = data.fileRealName.substring(fileIndex, data.fileRealName.length);
      axios.get(this.$vueAppBaseApi + '/resource/' + fileRealNewName,
        {
          responseType: 'blob'
        }).then(res => {
        if (res.status === 200) {
          let types = ''
          const index1 = data.fileRealName.lastIndexOf('.') + 1
          const index2 = data.fileRealName.length
          const file_type = data.fileRealName.substring(index1, index2)
          // 判断文件类型，补充type
          if (file_type === 'xlsx' || file_type === 'xls') {
            types = 'application/vnd.ms-excel'
          } else if (file_type === 'png') {
            types = 'application/x-png'
          } else if (file_type === 'jpg') {
            types = 'application/x-jpg'
          } else if (file_type === 'jpeg') {
            types = 'image/jpeg'
          }
          // res.data是后台返回的二进制数据，type:types为下载的数据类型
          const blob = new Blob([res.data], {
            type: types
          })
          const downLoadEle = document.createElement('a')
          const href = URL.createObjectURL(blob)
          downLoadEle.href = href
          // ooo为自定义文件名
          downLoadEle.download = fileRealNewName
          document.body.appendChild(downLoadEle)
          downLoadEle.click()
          document.body.removeChild(downLoadEle)
          window.URL.revokeObjectURL(href)
        }
      })
    }

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ

实现批量下载的功能可以通过循环遍历待下载的文件列表，并将下载代码放在循环体内执行。具体实现代码如下：

batchDownloadAgencyattach(fileList) {
  for (let i = 0; i < fileList.length; i++) {
    const data = fileList[i]
    let fileIndex = data.fileRealName.lastIndexOf('/') + 1
    let fileRealNewName = data.fileRealName.substring(fileIndex, data.fileRealName.length)
    axios.get(this.$vueAppBaseApi + '/resource/' + fileRealNewName, {
      responseType: 'blob'
    }).then(res => {
      if (res.status === 200) {
        let types = ''
        const index1 = data.fileRealName.lastIndexOf('.') + 1
        const index2 = data.fileRealName.length
        const file_type = data.fileRealName.substring(index1, index2)
        // 判断文件类型，补充type
        if (file_type === 'xlsx' || file_type === 'xls') {
          types = 'application/vnd.ms-excel'
        } else if (file_type === 'png') {
          types = 'application/x-png'
        } else if (file_type === 'jpg') {
          types = 'application/x-jpg'
        } else if (file_type === 'jpeg') {
          types = 'image/jpeg'
        }
        // res.data是后台返回的二进制数据，type:types为下载的数据类型
        const blob = new Blob([res.data], {
          type: types
        })
        const downLoadEle = document.createElement('a')
        const href = URL.createObjectURL(blob)
        downLoadEle.href = href
        // ooo为自定义文件名
        downLoadEle.download = fileRealNewName
        document.body.appendChild(downLoadEle)
        downLoadEle.click()
        document.body.removeChild(downLoadEle)
        window.URL.revokeObjectURL(href)
      }
    })
  }
}

你需要将待下载的文件列表传入该方法中。