jquery异步post请求下载文件

在一些导出操作中,我们通常需要传入参数,调用后台的接口导出文件,一般通过GET请求即可实现导出。而在一些特殊情况下,比如需要传入的参数超过了URL的最大值,我们就无法用GET请求实现了。

这时我们被迫转而使用POST请求,但POST请求怎么用来下载后台返回的文件呢?我们其实可以利用html5的Blob对象处理ajax请求返回的二进制文件。

var blob = new Blob(dataArr:Array<any>, opt:{type:string});
  • dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。
  • opt:对象,用于设置Blob对象的属性(如:MIME类型)。

然后window.URL对象可以为Blob对象生成一个网络地址,结合a标签的download属性设置文件名,可以实现点击url下载文件 。

在IE浏览器中,由于不支持download属性,可以通过其私有的msSaveBlob方法导出文件。

具体代码片段如下(success为ajax的回调,请求返回excel文件):

...
success: function(res) {
    var blob = new Blob([res], {type: "application/vnd.ms-excel"});
    if(window.navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, "导出的文件名.xls");
    }
    else {
        var objectUrl = URL.createObjectURL(blob);
        var alink = document.createElement("a");
        alink.href = objectUrl;
        alink.download = "导出的文件名.xls";
        document.body.appendChild(alink);
        alink.click();
        document.body.removeChild(alink);
    }
}

原创文章,转载请注明: 转载自闲云博客

本文链接地址: jquery异步post请求下载文件

发表评论

电子邮件地址不会被公开。 必填项已用*标注