业务场景

需要用POST传输文件的筛选条件，post的数据格式需要时 application/json，那么就不能使用<Form>元素来模拟POST^{1，因为form元素的contentType只能设置为application/x-www-form-urlencoded， multipart/form-data， text/plain，这三种^{2。设置form enctype属性指定为application/json，最后还是会强制的设置为“Content-Type:application/x-www-form-urlencoded”^3。}}

那么就直接用AJAX 的 POST 方法来做吧，先写出第一版

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    contentType: "application/json",
    success: function (res) {
        // res 为二进制流
        console.log("成功",res)
    }
});

先运行一下看看。结果啥都没发生。命令行里也没有打印出东西。这是咋回事，再加个complete方法试试看。

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    contentType: "application/json",
    success: function (res) {
        // res 为二进制流
        console.log("成功",res)
    },
    complete: function (XMLHttpRequest,status) {
    	console.log(XMLHttpRequest,status)
	}
});

结果打印出来的status值为parsererror，找了一下原来是项目之前全局设置了dataType: "json"，如果后端返回的是二进制流Content-Type: application/octet-stream;charset=UTF-8，就需要先覆盖之前设置的dataType，就设置dataType为’binary’，而且还需要设置responseType^{4。再改造一番：}

$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    dataType: 'binary',
    xhrFields: { responseType: "blob" },
    contentType: "application/json",
    success: function (res) {
        // res 为二进制流
        console.log("成功",res)
        let blob = new Blob([res])
        let da = document.createElement('a')
        da.href = URL.createObjectURL(blob);
        da.setAttribute("download","data.xls");
        da.click();
        URL.revokeObjectURL(da.href);
    },
    complete: function (XMLHttpRequest,status) {
    	console.log(XMLHttpRequest,status)
	}
});