美文网首页
vue解析blob响应二进制文件流下载

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

作者: 哒哒哒哒da | 来源:发表于2021-07-14 09:53 被阅读0次
    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
          );
        },
    

    相关文章

      网友评论

          本文标题:vue解析blob响应二进制文件流下载

          本文链接:https://www.haomeiwen.com/subject/igzepltx.html