原生Ajax下载流文件

博客介绍了JS下载文件的正常效果,同时给出错误示范代码,指出即便在beforeSend方法中指定xhr的responseType,在complete中也无法识别Blod对象,只能使用原生的ajax,内容仅供参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可以正常使用的用法:

	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

如果有疑问的可以提出自己的观点,仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值