前端vue下载文件时blob返回流中怎么获取文件名
我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优化,于是就有了这篇。
首先,针对第一个问题,如果能正常获得文件流,前端则以blob对象承接,反之,一般后端会传一个json对象告诉你失败了以及失败原因,这个时候json对象由于请求中responseType: 'blob'的声明之后,也会生成文件,但是文件内容是乱码,这个时候,我们必须要用到FileReader.readAsText():
详细见MDN官方文档关于FileReader.readAsText()的描述:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsText。所以上次的代码经过改造是这样子的:
<el-button @click="exportExcel()">导出</el-button> <script>
methods: {
exportExcel(){
var params={
XX:xx//额外需要携带的请求体
}
this.$axios.get('/XX/XX',{
params: params,
responseType: 'blob' //首先设置responseType字段格式为 blob
}).then(res => {
if(res.type=="application/json"){
let reader = new FileReader();
reader.onload = e =>this.$alert(JSON.parse(e.target.result).xxxx); //xxxx为字段名
reader.readerAsText(res);
}else{
let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
let a = document.createElement("a");
a.href = url;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
}
});
},
}
</script>
然后,我们针对第二个问题,前端获取的流怎么能获取原文件名?有两种解决方案,都得需要后端同事的配合,一种是在点击导出按钮之前,一般这种就是有一个文件列表(表格),前端已经知道文件的位置,然后把文件路径传给后端,由后端到指定目录下取到再传给你。文件上传的时候因为防止文件名重复,后端会对文件进行重命名(采取8位随机字符串+原文件名),在你知道路径的情况下,你就可以直接将文件路径中最后一个"/"后字段进行截取作为文件名。
<el-button @click="exportExcel()">导出</el-button> <script>
methods: {
exportExcel(){
var params={
filePath:this.filePath
}
this.$axios.get('/XX/XX',{
params: params,
responseType: 'blob' //首先设置responseType字段格式为 blob
}).then(res => {
if(res.type=="application/json"){
let reader = new FileReader();
reader.onload = e =>this.$alert(JSON.parse(e.target.result).xxxx); //xxxx为字段名
reader.readerAsText(res);
}else{
let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
let a = document.createElement("a");
a.href = url;
let filePath = this.filePath;
let subFilePath = filePath.split('/');
a.download = subFilePath[subFilePath.length-1].substring(8);
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
}
});
},
}
</script>
另一种是后端同事先对请求头进行改造,在给前端返回的请求头中添加Content-Dispositon字段。
response.reset();
response.setContentType("application/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"); //设置文件类型,这里以.xlsx为例
//设置文件的原文件名,若文件名中含有中文则需要解码,否则会出现乱码
response.setHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName, "utf-8"));
// 这步很关键,需要在给前端返回的请求头中添加Content-Disposition字段
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
f12控制台network中请求头部分
然后有些人就是在这个地方卡住了,说利用res.headers['content-disposition']取不到Content-Dispositon的值,这是因为这些人都配置了axios拦截器,而且在拦截器里写了相关的处理导致没有返回全部的响应信息。我们在上面代码中.then()回调函数中的res返回前是都要经过axios拦截器处理的,如果没有设置axios拦截器的是可以直接通过res.headers['content-disposition']直接获取到的。
// 添加响应拦截器
axios.interceptors.response.use(response=>{
// 对响应数据做点什么
return response.data; //这里只把这个响应里的data返回回来了,所以取不到headers,想要全部信息就return response;
}, error=>{
// 对响应错误做点什么
return Promise.reject(error);
});
前端vue下载文件时blob返回流中怎么获取文件名的更多相关文章
- 使用HttpURLConnection下载文件时出现 java.io.FileNotFoundException彻底解决办法
使用HttpURLConnection下载文件时经常会出现 java.io.FileNotFoundException文件找不到异常,下面介绍下解决办法 首先设置tomcat对get数据的编码:con ...
- 下载文件时-修改文件名字 Redis在Windows中安装方法 SVN安装和使用(简单版) WinForm-SQL查询避免UI卡死 Asp.Net MVC Https设置
下载文件时-修改文件名字 1后台代码 /// <summary> /// 文件下载2 /// </summary> /// <param name="Fil ...
- 转载: 正确处理浏览器在下载文件时HTTP头的编码问题(Content-Disposition)
最近在做一个下载工具时,发现CSDN上的资源下载时竟然没有被拦截到,经过分析,终于有了一个发现,解决了我之前做文件下载时的乱码问题,所以转载这篇释疑文章,希望有人可以看到,可以从中得到帮助,也用来备忘 ...
- Firefox下载文件时中文名乱码问题
为了形象化,先看几张不同浏览器下下载文件时的效果图: 1:Firefox 36.0.1 2:IE8 3:Chrome 40.0.2214.93 m 4:360 7.1.1.322 很明显在Firefo ...
- 正确处理下载文件时HTTP头的编码问题(Content-Disposition)
留坑 参考: 正确处理下载文件时HTTP头的编码问题(Content-Disposition) HTTP协议header中Content-Disposition中文文件名乱码 文件下载,content ...
- C#中解决Response.AddHeader("Content-Disposition", "attachment; filename=" + filename)下载文件时文件名乱码的问题
问题:下载文件时文件名乱码怎么解决? 在C#写后台代码过程中,经常遇到下载文件出现文件名乱码的问题,在网上找了很多方法,总是存在浏览器不兼容的问题,当IE浏览器不乱码时,火狐浏览器就会乱码,后来经过反 ...
- java下载文件时文件名出现乱码的解决办法
转: java下载文件时文件名出现乱码的解决办法 2018年01月12日 15:43:32 橙子橙 阅读数:6249 java下载文件时文件名出现乱码的解决办法: String userAgent ...
- 在Xshell中上传下载文件到本地(linux中从多次ssh登录的dbserver里面的文件夹)
在Xshell中上传下载文件到本地(linux中从多次ssh登录的dbserver里面的文件夹) 1 列出所有需要copy的sh文件 -bash-4.1$ ll /mysqllog/osw/*.sh ...
- .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载
前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...
随机推荐
- flask学习1
总结 Flask Web 框架 轻量 websocket 全双工通讯 socket TCP 通讯 MongoDB 数据库 文件型数据库 {} 没有限制 和 约束 Mui + HTML5 Plus 调用 ...
- UIView与核心动画对比?
1.UIView和核心动画区别? 核心动画只能添加到CALayer 核心动画一切都是假象,并不会改变真实的值. 2.什么时候使用UIView的动画? ...
- Emoji与unicode特殊字符的处理
遇到了一个很让人纠结的问题:emoji表情在使用的过程中,会莫名其妙的消失,或者变成乱码,同时数据库用utf8mb4来存储,但是也出现了问题,冷备过后,导入进库的时候,变成了不可见字符,神奇的消失了! ...
- iOS App 架构文章推荐
iOS应用开发架构 iOS应用架构谈系列 阿里技术沙龙 2.2.1. Hybrid App 2.2.2. taobao 客户端架构 2.2.3. alipay 客户端架构 iOS APP 架构漫谈 ...
- HMS Core 能力速配,唱响恋爱进行曲
情人节,HMS Core 最具CP感的能力搭档来袭,浓浓爱意,表白各行业,你准备好了吗? 1.ML Kit +Signpal Kit 科技相助,恋爱提速.展现爱意的方式有千百种,你可以用文本翻译学习数 ...
- 【HDU6647】Bracket Sequences on Tree(树Hash 树上Dp)
题目链接 大意 给出一颗树,按下列方式生成一个括号序列. function dfs(int cur, int parent): print('(') for all nxt that cur is a ...
- hexo 接入Google站长工具(google search console)提交sitemap
1.点击google search console 2.选择 点击红圈的按钮 新建资源 3.资源类型 选择网址前缀, 输入网站的url 4.输入完成后的点击验证 下载html 放在hexo 项目下的 ...
- 如何在 Xamarin 中快速集成 Android 版认证服务 - 邮箱地址篇
Xamarin 作为微软提供的移动服务多系统开发平台,成为很多开发者首选的应用开发平台.AppGallery Connect(以下简称 AGC)也在逐步的支持 Xamarin 的 SDK.认证服务也是 ...
- Spring-BeanFactory体系介绍
1 BeanFactory介绍 BeanFactory是Spring中的根容器接口,所有的容器都从从它继承而来,ApplicationContext中对于BeanDefinition的注册,bean实 ...
- C++ 提高编程
目录 C++ 提高编程 一. 模板 1. 概念 2. 函数模板 2.1 函数模板语法 2.2 注意事项 2.3 普通函数和函数模板的区别 2.4 普通函数和函数模板的调用规则 2.5 模板的局限性 3 ...