react项目中遇到前端在处理后端传来的文件流实现导出Excel文件功能，responseType:'blob'类型设置无效问题。

axios请求设置responseType: 'blob' 返回类型

const axios = require('axios');
export() {
    const token = sessionStorage.getItem('token');
    axios({ 
            method: 'post',
            url: `/list/downXlsx`, // 请求地址
            data,
            responseType: 'blob', //  表明返回服务器返回的数据类型  这里注意要加上responseType
            headers: {
                Authorization: `Bearer${token}`
            }
    }).then((res) => { // 处理返回的文件流
              const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
              const fileName = 'down.xlsx'
              const alink = document.createElement('a')
              alink.download = fileName
              alink.style.display = 'none'
              alink.href = URL.createObjectURL(blob)   // 这里是将文件流转化为一个文件地址
              document.body.appendChild(alink)
              alink.click()
              URL.revokeObjectURL(alink.href) // 释放URL 对象
              document.body.removeChild(alink)
     })
}

打印发现res.data返回是字符串乱码，并没有转换blob类型

20200215165621.png

于是各种找坑路上发现，原来在项目中使用了mockjs来模拟接口，mockjs初始化的时候给拦截响应设置了responseType:''

mockjs源码

// 初始化 Response 相关的属性和方法
Util.extend(MockXMLHttpRequest.prototype, {
   responseURL: '',
   status: MockXMLHttpRequest.UNSENT,
   statusText: '',
   // https://xhr.spec.whatwg.org/#the-getresponseheader()-method
   getResponseHeader: function(name) {
       // 原生 XHR
       if (!this.match) {
           return this.custom.xhr.getResponseHeader(name)
       }

       // 拦截 XHR
       return this.custom.responseHeaders[name.toLowerCase()]
   },
   // https://xhr.spec.whatwg.org/#the-getallresponseheaders()-method
   // http://www.utf8-chartable.de/
   getAllResponseHeaders: function() {
       // 原生 XHR
       if (!this.match) {
           return this.custom.xhr.getAllResponseHeaders()
       }

       // 拦截 XHR
       var responseHeaders = this.custom.responseHeaders
       var headers = ''
       for (var h in responseHeaders) {
           if (!responseHeaders.hasOwnProperty(h)) continue
           headers += h + ': ' + responseHeaders[h] + '\r\n'
       }
       return headers
   },
   overrideMimeType: function( /*mime*/ ) {},
   responseType: '', // '', 'text', 'arraybuffer', 'blob', 'document', 'json'
   response: null,
   responseText: '',
   responseXML: null
})

找到入口文件把require('./mock/index.js');注释就可以了~

企业微信截图_15817568349106.png

爬坑路上好辛苦！哈哈哈哈~