The backend returns binary/garbled front-end export (jq and vue)

1. How to deal with binary garbled code using jq
 

When encapsulating the interface, you need to add the blob type and use jq to encapsulate it using the most primitive method.

//导出
    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)
    }

};

usage:

  // 下载模板
    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’s method of processing binary garbled code
 

In the same way as jq, when calling the interface, handle 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);
      })
    })
  },

usage:

 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);
    },

Summary: These two export methods are pretty much the same, but you need to pay attention when using encapsulation.
Finally, thank you for reading. If there are any deficiencies, please point them out.