2种 Ajax下载文件方法

/ 前端 / 没有评论 / 483浏览

代码生成表单

function download(url, data) {
    // 定义一个form表单
    var form = $("<form>");
    // 在form表单中添加查询参数
    form.attr('style', 'display:none');
    // 使用POST方式提交
    form.attr('method', 'post');
    // 设置请求地址
    form.attr('action', url);

    // 将查询参数控件添加到表单上
    for (var key in data) {
        form.append('<input type="hidden" name="' + key + '" value="' + data[key] + '" />');
    }

    var token = localStorage.getItem("adminToken");
    form.append('<input type="hidden" name="_header" value="' + token + '" />');

    // 将表单放置在web中
    $('body').append(form);
    // 提交表单
    form.submit();
}

可添加头部参数

function downloadV2(url, data) {
    var xhr;
    // 判断是否为IE6浏览器
    if (window.XMLHttpRequest) {
        // 创建ajax对象
        xhr = new XMLHttpRequest();
    }
    else {
        // IE6浏览器创建ajax对象
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    xhr.setRequestHeader("token", localStorage.getItem("adminToken"));
    // 也可以使用POST方式,根据接口
    xhr.responseType = "blob";
    // 返回类型blob
    // 定义请求完成的处理函数,请求前也可以增加加载框
    // 禁用下载按钮逻辑
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                // 返回200
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                // 转换为base64,可以直接放入a标签href
                reader.onload = function (e) {
                    // 转换完成,创建一个a标签用于下载
                    var a = document.createElement('a');
                    var fileName = xhr.getResponseHeader("fileName");
                    a.download = decodeURI(decodeURI(fileName));
                    a.href = e.target.result;
                    $("body").append(a);
                    // 修复firefox中无法触发click
                    if (document.createEvent) {
                        var evt = document.createEvent("MouseEvents");
                        evt.initEvent("click", true, true);
                        a.dispatchEvent(evt);
                    }
                    else if (document.createEventObject) {
                        a.fireEvent('onclick');
                    } else {
                        a.click();
                    }

                    $(a).remove();
                }
            } else {
                alert("请求异常!!!");
            }
        }
    };

    // 发送ajax请求
    xhr.send(JSON.stringify(data));
}