vue批量下载

分两种情况，根据接口返回的数据格式判断是base64还是blob

1.接口返回的base64格式

请求接口

/**
 * 批量下载
 * @param params
 */
export function downloadFileBatch(data) {
    return request({
        url: api.downloadFileBatch,
        method: 'post',
        data
    })
}

将base64转成blob格式

// base64转blob
        dataURLtoBlob(dataurl, mime) {
            const arr = dataurl.split(',')
            // const mime = arr[0].match(/:(.*?);/)[1]
            const bstr = atob(arr[0])
            let n = bstr.length
            const u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new Blob([u8arr], { type: mime })
        },

下载

const params = {
      fileType: '1',
      }
      downloadRxFileBatch(params).then(res => {
// base转blob
         const blob = this.dataURLtoBlob(res.data.data, res.data.mimeType)
         this.downloadZip(blob, res.data.fileName)
      })

2.接口返回的blob格式

请求接口

/**
 * 批量下载
 * @param params
 */
export function downloadFileBatch(data) {
    return request({
        url: api.downloadFileBatch,
        method: 'post',
        responseType: 'blob',
           headers: {
           'Content-Type': 'application/json; application/octet-stream'
        },
        data
    })
}

下载

// 下载方法
downloadZip(content, filename) {
   const blob = new Blob([content], { type: 'application/zip' })
   const fileName = filename + '.zip'
   if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = window.URL.createObjectURL(content)
      document.body.appendChild(elink)
      elink.click()
         window.URL.revokeObjectURL(elink.href) // 释放URL 对象
         document.body.removeChild(elink)
       } else {
          // IE10+下载
          navigator.msSaveBlob(content, fileName)
       }
},



downloadAll() {
    const params = {
       fileType: '1'
    }
//请求接口
    downloadFileBatch(params).then(res => {
//下载方法
       this.downloadZip(blob, res.data.fileName)
    })
}