后端返回二进制/乱码 前端导出（jq和vue）

1.jq处理二进制乱码方法
 

封装接口的时候 要加入blob类型 需注意 用jq 要使出最原始的方法封装它

//导出
    blobPostJs:function (url, data , successCallback, errorCallback) {
        var xhr = new XMLHttpRequest();
        xhr.open('post', url, true);    
        xhr.responseType = "blob";  // 返回类型blob
        xhr.setRequestHeader('Content-Type','application/json;charset=utf-8',
        ); 
        xhr.setRequestHeader("msg", "param");
        xhr.setRequestHeader('jmis-auth','bearer ' + token,);
        xhr.setRequestHeader('x-access-token',token,);
        xhr.setRequestHeader('Access-Control-Allow-Credentials',true,);
        xhr.onload = function () {
            if (this.status === 200) {
                var blob = new Blob([this.response])
                successCallback(blob)
            }else{
               console.log("下载失败")
            }
        };
        // 发送ajax请求
        xhr.send(null)
    }

};

用法：

  // 下载模板
    updatafile(){
      AjaxUtil.blobPostJs( '/jmis-cloud/api/gis/airport/exportTemplate', {}, function(response) {
        const url = window.URL.createObjectURL(response)
        const link = document.createElement('a')
        link.href = url
        let type ='.xlsx'
        const filename = "机场数据模版" + type;
        link.download = filename;
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url);
      }, function(error) {
        console.log(error);
      });
    }

2.vue处理二进制乱码 方法
 

与jq同理 在调用接口的时候处理下responseType：‘blob’

  blobPost: function (url, data = {}, config = {}) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url: url,
        data: data,
        responseType: 'blob',
        ...config
      }).then((response) => {
        resolve(response);
      }).catch((error) => {
        reject(error);
      })
    })
  },

用法:

 async  downloadTemplate() {
  const res = await this.apiObj.exportTemplate()
  this.importVisible = false;
  console.log('1111',res.data);
  const url = URL.createObjectURL(new Blob([res.data]));
        console.log(222, url);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        let type = res.headers["content-disposition"].substr(20);
        const filename = "机场数据模版" + new Date().getTime() + type;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    },

总结：这两种导出的方法大差不差 但是使用封装的时候需要注意一下
最后 感谢阅读 如果有不足之处 请指出