Blob
是xhr 2
的内容,jquery
不支持,可以考虑axios
或原生xhr/fetch
。
接口请求类型
(1)get请求,可以直接使用window.open的方式
window.open(url);
(2)post请求, 'application/x-www-form-urlencoded',使用下面的方法或xhr原生
function exportData(api, params, encode) {
var form = $('<form>'); //定义一个form表单
form.attr("style", "display:none");
form.attr("target", "_blank");
form.attr("method", "post"); //请求类型
encode = encode || 'application/x-www-form-urlencoded'
form.attr("enctype", encode);
form.attr("action", api); //请求地址
$("body").append(form); //将表单放置在web中
var input1 = $("<input>");
input1.attr("type", "hidden");
input1.attr("name", "jsonString"); // 所有参数放到一个字段jsonString中,让后端再去解析,根据接口具体情况决定
input1.attr("value", JSON.stringify(params));
form.append(input1);
form.submit(); // 发送请求
form.remove()
}
(3)post请求, 'application/json;charset=UTF-8',使用原生xhr方法如下
download("http://.....exportData", {"name": "张三", "year": 30});
function download(url, data) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true); // 请求方式,看具体接口情况决定
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); // 内容类型,看具体接口情况决定
xhr.withCredentials = true;
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入ahref
reader.onload = function (e) {
// 转换完成,创建一个a标签用于下载
var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
// $("body").append(a); // 修复firefox中无法触发click
a.click();
// $(a).remove();
}
}
};
xhr.onerror = function() {alert("下载失败")};
// 发送ajax请求
xhr.send(JSON.stringify(data)); // 数据格式,看具体接口情况决定
}
更多推荐
js中通过ajax接口后台返回的文件流如何进行下载?
发布评论