leftso 135 0 2022-12-21

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应用











 

评论区域

评论功能已关闭. 提示:评论功能虽已关闭,关闭之前的评论仍然会展示。