jQuery 利用其 AJAX 下载后端返回的 application/octet-stream 二进制数据

业务场景

需要用POST传输文件的筛选条件，post的数据格式需要时 application/json，那么就不能使用

元素来模拟POST¹，因为form元素的contentType只能设置为application/x-www-form-urlencoded， multipart/form-data， text/plain，这三种²。设置form enctype属性指定为application/json，最后还是会强制的设置为“Content-Type:application/x-www-form-urlencoded”³。

那么就直接用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⁴。再改造一番：

$.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)
	}
});

OK，成功下载

参考资料

---

1. js 模拟from提交post ↩︎

2. Form表单的主要Content-Type ↩︎

3. html form 无法指定 content-type 为 application/json ↩︎

4. jQuery ajax返回parsererror错误的解决方法 | $.ajax中设置responseType ↩︎