记一次,axios,jq,xhr获取后端,excel数据乱码

01: 低版本的jq,不支持二进制数据的解析

01: 版本3.X
02: 设置
xhrFields: { responseType: ‘blob’ },

$.ajax({
      url: 'http://192.168.10.101:8089/Defect/exportDefectByQuery',
      type: 'post',
      contentType: 'application/json;charset=UTF-8',

      xhrFields: {
        responseType: 'blob'
      },

      cache: false,
      data: JSON.stringify({ action: 'exportDefectByQuery', current_user_id: "1" }),
      success: function success(res, textStatus, jqXHR) {
        var fileName = decodeURIComponent('待办列表')
        var fileType = '.xls'
        // 这里res.data是返回的blob对象
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        let downloadElement = document.createElement('a');
        let href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = fileName + fileType;// 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      }
    })

02: axios 设置第三个参数 { responseType: ‘blob’ }

axios.post('http://192.168.10.101:8089/Defect/exportDefectByQuery', {
      action: 'exportDefectByQuery',
      current_user_id: "1"
    }, { responseType: 'blob' })
      .then(function (response) {
        var fileName = decodeURIComponent('待办列表');
        var fileType = '.xls';
        let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
        let downloadElement = document.createElement('a');
        let href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = fileName + fileType;// 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      })
      .catch(function (error) {
        console.log(error);
      });

**03: 原生xhr,本身支持 设置: xhr.responseType = “blob” **

var xhr = new XMLHttpRequest();
let data = {
  action: 'exportDefectByQuery',
  current_user_id: "1"
}
xhr.open('post', 'http://192.168.10.101:8089/Defect/exportDefectByQuery', true);
xhr.responseType = "blob";
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(JSON.stringify(data));
xhr.onload = function () {
  if (xhr.readyState == 4 && xhr.status === 200) {
	// 响应头信息 
    let headers = xhr.getAllResponseHeaders().toLowerCase();
    let res = xhr.response
    
    let fileName = decodeURIComponent('待办列表')
    let fileType = '.xls'

    let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    let downloadElement = document.createElement('a');
    let href = window.URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = fileName + fileType;// 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  }
}

04: 获取请求响应头信息

浏览器只能访问以下默认的 响应头

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

获取更多的响应头信息

服务器上设置 Access-Control-Expose-Headers: name, xx,xxx

打印信息

cache-control: no-cache
content-type: application/x-download;charset=utf-8
filename: %e7%bc%ba%e9%99%b7%e8%a1%a8
filetype: .xls