vue解析blob响应二进制文件流下载

import axios from 'axios'
import { getToken } from '@/utils/auth'

const mimeMap = {
  zip: 'application/zip',
  pdf: 'application/pdf',
  png: 'application/png',
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  xls: 'application/vnd.ms-excel',
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  csv: 'application/csv',
  doc: 'application/msword',
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  bmp: 'image/bmp',
  gif: 'image/gif',
}

const baseUrl = process.env.VUE_APP_BASE_API
export function downLoadBlob(str, type,filename) {
  var url = baseUrl + str
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then(res => {
    let mimeType;
    if(type == 'zip'){
      mimeType = mimeMap.zip
    }else if(type == 'pdf'){
      mimeType = mimeMap.pdf
    }else if(type == 'png'){
      mimeType = mimeMap.png
    }else if(type == 'jpg'){
      mimeType = mimeMap.jpg
    }else if(type == 'jpeg'){
      mimeType = mimeMap.jpeg
    }else if(type == 'xls'){
      mimeType = mimeMap.xls
    }else if(type == 'xlsx'){
      mimeType = mimeMap.xlsx
    }else if(type == 'csv'){
      mimeType = mimeMap.csv
    }else if(type == 'doc'){
      mimeType = mimeMap.doc
    }else if(type == 'docx'){
      mimeType = mimeMap.docx
    }else if(type == 'bmp'){
      mimeType = mimeMap.bmp
    }else if(type == 'gif'){
      mimeType = mimeMap.gif
    }
    resolveBlob(res, mimeType, filename)

  })
}
/**
 * 解析blob响应内容并下载
 * @param {*} res blob响应内容
 * @param {String} mimeType MIME类型
 */
export function resolveBlob(res, mimeType,filename) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // 视情况而定
  // 1.从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  // var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  // var contentDisposition = decodeURI(res.headers['content-disposition'])
  // var result = patt.exec(contentDisposition)
  // var fileName = result[1]
  // fileName = fileName.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  // 2.直接使用自定义文件名
  aLink.setAttribute('download', filename) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  document.body.removeChild(aLink);
}

import { downLoadBlob} from "../../../utils/xxxx";
//点击确认下载
handleDownload(row) {
      // console.log("下载", row);
      downLoadBlob(
        "/xxx/xxx/xxx?id=" + row.id,
        row.fileType,
        row.fileName
      );
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。