VUE中获取后端Blob文件流的方法

本方法适用于PC端和手机端

一、公共方法

1. 获取后端文件流

// 通过后端接口拿到文件流
export function getBlob(url, parameter, method) {
  return request({
    url: url,
    method: method || 'post',
    data: method !== 'get' ? parameter : null,
    params: method === 'get' ? parameter : null,
    responseType: 'blob' // 这一行是关键，拿到blob数据类型的文件
  })
}

2.下载 blob 文件流

export function downloadFile(data, fileName, fileSuffix) {
  let fileTypeMime = '' // 文件 mime 类型，移动端必传，否则下载不成功；pc端可传可不传
  switch (fileSuffix) { // 获取后缀对应的 mime
    case 'png': fileTypeMime = 'image/png'; break;
    case 'doc': fileTypeMime = 'application/msword'; break;
    case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break;
    case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break;
    case 'gif': fileTypeMime = 'image/gif'; break;
    case 'svg': fileTypeMime = 'image/svg+xml'; break;
    case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break;
    case 'txt': fileTypeMime = 'text/plain'; break;
    case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break;
    case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break;
    case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break;
    case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break;
    case 'zip': fileTypeMime = 'application/zip'; break;
    case '7z': fileTypeMime = 'application/x-7z-compressed'; break;
  }


  let blob = window.URL.createObjectURL(new Blob([data], {
    'type': fileTypeMime
  }))
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = blob
  link.setAttribute('download', fileName + fileSuffix)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link) //下载完成移除元素
  window.URL.revokeObjectURL(blob) //释放掉 blob 对象
}

二、业务调用

// 导出报告：
    exportReport() {
      getBlob(url, param, 'get').then(data => {
        // 拿到 blob 数据类型
        downloadFile(data, 文件标题, '.docx')
      })
    }