Ajax Post 下载文件

Ajax Post 下载文件

通过原生js实现

function ajaxPostDownload(url,fileName,callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.setRequestHeader("accessToken",session.get('accessToken'));
    xhr.responseType = "blob";   //返回类型blob
    xhr.onload = function () {   //定义请求完成的处理函数
        try {
            if (this.status === 200) {
                // console.log(this.response.type);
                // 获取响应头部
                // let fn=this.getResponseHeader("Content-Disposition");
                let blob = this.response;// 后端注意设置Content-Type，否则某些浏览器不支持下载
                let reader = new FileReader();
                reader.readAsDataURL(blob);   // 转换为base64，可以直接放入a标签href
                reader.onload = function (e) {
                    var a = document.createElement('a');   // 转换完成，创建一个a标签用于下载
                    a.download = fileName;
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }else if(this.status === 504){
                messageError('文件下载失败：超时');
            }else{
                messageError('文件下载失败，状态码：'+this.status);
            }
        }catch (e){
            messageError('下载错误：'+JSON.stringify(e))
        }finally {
            if (callback){
                callback();
            }
        }

    };
    xhr.send();
}

调用

let url="";
let fileName="abc.png";
ajaxPostDownload(url,fileName,function(){
  //下载完成后得操作，可以没有
})

基于原生js编写，适用绝大部分H5应用











 

ajax post下载文件 post下载文件 ajax下载文件 blob文件下载

https://blog.xqlee.com/article/1113.html