可以正常使用的用法:
var url = fileParam.downloadPath;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true); // 也可以使用POST方式,根据接口
xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回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');
a.download = param.fileName;
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
}
}
};
// 发送ajax请求
xhr.send(JSON.stringify(param));
—效果 就是下载文件的效果
错误 的示范代码
// $.ajax({
// url:fileParam.downloadPath,
// type:"POST",
// data:JSON.stringify(param),
// contentType:"application/json;charset=utf-8",
// beforeSend:function(xhr){
// xhr.responseType = "blob";
// },
// success:function (data) {
//
// // //var blob = new File(data);
// // var a = document.createElement("a");
// // a.download = "hulian.jpg";
// // a.href = url.replace("VALUE",data);
// //a.click();
// //var file = new File(data,"123.jpg",{ type: 'application/force-download' });
// //window.open(URL.createObjectURL(file));
// },error:function (err) {
// console.log(err);
// },complete : function (xhr,data){
//
// var blob = this.response;
// var reader = new FileReader();
// reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
// reader.onload = function (e) {
// // 转换完成,创建一个a标签用于下载
// var a = document.createElement('a');
// a.download = 'data.jpg';
// a.href = e.target.result;
// $("body").append(a); // 修复firefox中无法触发click
// a.click();
// $(a).remove();
// }
// }
// });
即使在 beforeSend 方法中指定了xhr 的responseType 在complete 中也不会识别 Blod 对象,只能用原生的ajax
如果有疑问的可以提出自己的观点,仅供参考