原生Ajax下载流文件

最新推荐文章于 2024-03-28 17:49:22 发布

原创最新推荐文章于 2024-03-28 17:49:22 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js

jquery 同时被 2 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

博客介绍了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

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