网站维护属于什么专业,anivia wordpress,遵义网站建设优化公司,网站建设流程公司前言#xff1a;
本是一个非常简单的请求#xff0c;即是下载文件。通常的做法如下#xff1a;
1.前端通过Vue Axios向后端请求#xff0c;同时在请求中设置响应体为Blob格式。
2.后端相应前端的请求#xff0c;同时返回Blob格式的文件给到前端#xff08;如果没有步骤…前言
本是一个非常简单的请求即是下载文件。通常的做法如下
1.前端通过Vue Axios向后端请求同时在请求中设置响应体为Blob格式。
2.后端相应前端的请求同时返回Blob格式的文件给到前端如果没有步骤1设置响应体则后端返回的是一个文件流前端
3.前端创建a标签进行下载
提示如果后端返回的是文件的地址那么前端可以直接通过window.location.href加文件路径即可下载文件。但是如果后台返回的是文件流那么前端就需要做一些处理。处理的核心也是将文件流转成文件然后使用a标签模拟点击下载。 找出问题 解决问题
我遇到的问题也是我想写篇文章记录一下的原因因为下载文件这样的需求我都写烂了都觉得这是得心应手的事情在跟后端对接的时候我非常坚定是后台返回流有问题后面打脸了...
这里我贴上我下载文件实现代码
1.请求API 重点设置 responseType: blob
2.封装的异步请求 3.调用接口拿到返回值模拟超链接点击下载文件 以上步骤似乎感觉是妥妥的了但是我在自测的时候一整个人蒙住文件直接是打不开 然后我看控制台的输出一看不对劲啊经过转换应该返回正常的blob格式才对却是如下
正式因为如此导致下载下来的是一个无效的文件。
然后开始进一步的排查代码都被我看烂了也没看出来哪里会不对劲各种百度也都试了就是没有发现有什么问题。最后也是很突然的我看到有个博主的文章真的起到醍醐灌顶的作用文章其中一句“mock模块会影响原生的ajax请求使得服务器返回的blob类型变成乱码”我才惊愕因为我在项目中却是用到了mock打开控制台发现mockjs初始化的时候给拦截响应设置了responseType:证据如下 终于找到原因了同时把mock注释掉就可以了。真的是怎么也没有想到是mock模块影响了可是花了好长一段时间去排查这个问题呢解决了就好呀
下面是正常后拿到的数据格式 优化
tip我们可以把模拟a标签下载文件这个逻辑封装起来如果后面又下载文件的需求的时候可以直接拿来用即可。
1.封装获取文件流转成文件并模拟点击该文件实现下载
2.使用
