一、ajax请求获取二进制流文件（blog）解决办法

最新推荐文章于 2025-06-20 11:45:36 发布

置顶 _不知道叫什么名字

最新推荐文章于 2025-06-20 11:45:36 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax ajax请求二进制流文件（blog）如何下载后端返回的二进制流文件 ajax请求blog 二进制流文件下载

本文链接：https://blog.youkuaiyun.com/weixin_39514326/article/details/88035194

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用Ajax请求获取二进制流文件的解决方案，包括前端如何通过Blob处理响应，以及后端PHP生成并输出Excel文件的过程。特别关注了如何从前端下载由后端生成的二进制文件。

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

一、ajax请求获取二进制流文件解决办法

今天在做excel导出的时候，碰到了一系列问题，以下是记录。

首先，整个过程就是现在前台页面先封装好要下载的文件数据，然后点击按钮触发了ajax请求，然后后台php就进行了数据的获取，处理数据，然后引用php的插件Spreadsheet生成了对应的图表，然后直接对着前台输出了:

以下为后台php代码向前端输出的文件流
header(‘filename:’.$file_name); //没有缓存 header(‘Cache-Control:no-cache,no-store’); //允许获取的访问头部 header(‘Access-Control-Expose-Headers:filename’); $w r i t e r = I O F a c t o r y : : c r e a t e W r i t e r ($ spreadsheet, ‘Xlsx’); $writer->save(‘php://output’);

以上就是tp5后端控制器方法的结束，那么问题来了

以上返回的报文中，所储存的是二进制流文件。然后用惯了jq的ajax的我，就懵逼了，一直以为数据交流只有html，text，json，xml，然后查了资料后发现原来还有blob这种数据交流。

然后就用了纯js去获取数据，然后得到数据后
以下是整个前端获取数据流并下载的流程（重点）

var url=server_url+'/index/index/get_rep';   //请求的URl
            var xhr = new XMLHttpRequest();		//定义http请求对象
            xhr.open("POST", url, true);		
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("userId="+username+"&password="+password+"&repo_type="+type+"&repo_time=");
            xhr.responseType = "blob";  // 返回类型blob
            xhr.onload = function() {   // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                if (this.status===200) {
                    var blob = this.response;
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                    reader.onload=function (e) {
                        console.log(e);			//查看有没有接收到数据流
                        // 转换完成，创建一个a标签用于下载
                        var a = document.createElement('a');
						a.download="data_repo"+".xlsx";			//自定义下载文件名称
                        a.href = e.target.result;
                        $("body").append(a);    // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                    }
                }
                else{
                    alert("出现了未知的错误!");
                }
            }

上面就是整个前后台blob数据流文件交流，（下面为片段解释） :

var reader = new FileReader();
reader.readAsDataURL(blob);

这种方式读取文件完之后，又使用了

reader.onload=function (e) {
                        console.log(e);
                        // 转换完成，创建一个a标签用于下载
                        var a = document.createElement('a');
						a.download="data_repo"+".xlsx";			//自定义下载文件名称
                        a.href = e.target.result;
                        $("body").append(a);    // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                    }