angularjs 文件下载 并 从response header中获取文件名
最近在做一个下载文件的功能,后台接口给的是二进制流的方式,那么前端要把二进制流下载下来。
这个过程使用$http的get请求,使用Blob接收,倒是没有难度,主要是遇到了,后台的文件名拿不到 的问题。
在浏览器 中是可以看到的这个请求头,就是js获取不到,如下图:
js中,使用response.headers(),只能获取到content-type,而获取不到content-disposition.
获取头信息的方法:
response.headers("Content-Disposition")
解决方法:
后台接口中,在响应头中增加:
context.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
具体实现方式靠后台人员,增加了这个之后,前端使用js就能获取到了。
现贴出前端代码:
$http({
url: url,
method: "GET",
params: data,
responseType: "blob" }).then(function (response, status, header, config, statusText) {
var fileName = response.headers("Content-Disposition").split(";")[].split("filename=")[];
var blob = response.data;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
// 创建一个a标签用于下载
var a = document.createElement('a');
a.download = fileName;
a.href = e.target.result;
$("body").append(a);
a.click();
$(a).remove();
} });
问题补充:
在使用过程中,发现,如果是中文文件名,则会存在乱码问题,解决这一问题:
在response header 中,filename* 会是unicode字符串编码后的文件名,
所以在前端从response header中获取文件名时,同时获取filename*的值,
如果存在,则优先使用filename* ,
并使用decodeURIComponent 对其进行解码。即可显示正确的中文文件名
将获取文件名处做如下修改:
var fileName = response.headers("Content-Disposition").split(";")[].split("filename=")[];
var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[];
if (fileNameUnicode) {//当存在 filename* 时,取filename* 并进行解码(为了解决中文乱码问题)
fileName = decodeURIComponent(fileNameUnicode.split("''")[]);
}
问题补充2:
在IE浏览器,下载无反应,因为IE浏览器不支持a标签的download属性,翻看以下w3cshool,如下:
果然啊,所以,改使用msSaveOrOpenBlob来下载文件,代码要做一些修改:
if ('msSaveOrOpenBlob' in navigator) {//IE导出
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
最终完整代码:
$http({
url: url,
method: "GET",
params: data,
responseType: "blob" }).then(function (response, status, header, config, statusText) {
var fileName = response.headers("Content-Disposition").split(";")[].split("filename=")[];
var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[];
if (fileNameUnicode) {//当存在 filename* 时,取filename* 并进行解码(为了解决中文乱码问题)
fileName = decodeURIComponent(fileNameUnicode.split("''")[]);
} var blob = response.data;
if ('msSaveOrOpenBlob' in navigator) {//IE导出
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
else {
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
reader.onload = function (e) {
// 转换完成,创建一个a标签用于下载
var a = document.createElement('a');
a.download = fileName;
a.href = e.target.result;
$("body").append(a);
a.click();
$(a).remove();
}
} });
angularjs 文件下载 并 从response header中获取文件名的更多相关文章
- Wildfly8 更改response header中的Server参数
项目经过局方安全检查需要屏蔽掉服务器中间件信息,查了一下午,网上看到的都是修改jboss7的,我们使用的wildfly8(jboss改名为wildfly),修改地方不一样,折磨了半天. jboss服务 ...
- JBoss 7 更改response header中的Server参数
jboss服务器缺省情况下会在HTTP response header中显示自身的标识,如下 Server: Apache-Coyote/1.1 出于安全考虑,如果不想让人知道服务器类型,可以用以下方 ...
- 【应用服务 App Service】如何移除App Service Response Header中包含的服务器敏感信息
问题描述 有些情况下,当应用部署到App Service上后,在有些Response Header中,可以看见关于服务器的一些信息,这样会导致隐藏的安全问题,所以可以在web.config中移除某些关 ...
- Python开发【笔记】:从海量文件的目录中获取文件名--方法性能对比
Python获取文件名的方法性能对比 前言:平常在python中从文件夹中获取文件名的简单方法 os.system('ll /data/') 但是当文件夹中含有巨量文件时,这种方式完全是行不通 ...
- python和C语言从路径中获取文件名
1.Python import os file_name = os.path.basename(filepath)#带后缀的文件名(不含路径) file_name_NoExtension = os.p ...
- 从response.header中提取cookie,在request里添加cookie
// List<String> resp = new ArrayList<String>(); // HeaderIterator headers ...
- 从一个带有http://网络文件中获取文件名
例如文件网址为: http://a.hiphotos.baidu.com/image/h%3D200/sign=c3da85e50123dd543e73a068e108b3df/80cb39dbb6f ...
- PHP 中获取文件名及路径
1. basename("/mnt/img/image01.jpg")函数:得到文件名;输出结果为:image01.jpg. 使用 basename($uriString) 我们可 ...
- 3种Java从文件路径中获取文件名的方法
package test; import java.io.File; public class FileName { /** * @param args */ public static void m ...
随机推荐
- @PathVariable不起作用,报错:Cannot resolve @PathVariable ' '
@PathVariable是占位符注解.可以把Url中变量的值传递到方法参数中. 示例如下: @PostMapping("/user/name/{id}") @ResponseBo ...
- 2019暑假Java学习笔记(二)
目录 基础语法(下) 流程控制 if语句 switch语句 while语句和do-while语句 for语句 break关键字 continue关键字 数组 一维数组 二维数组 用户输入操作 练习题: ...
- ASP.NET与非托管DLL的那些事儿【转+增】
https://www.cnblogs.com/yeahgis/archive/2011/11/12/2246341.html ASP.NET与非托管DLL的那些事儿 环境VS2010 语言:ISO ...
- 滚动事件优化 passive
1.addEventListener参数 target.addEventListener(type, listener[, options]); target.addEventListener(typ ...
- odoo开发笔记--定时任务源码分析
场景描述: 处理思路: 参考文章: 定时任务相关: https://www.jianshu.com/p/ad48239f84d6 https://blog.csdn.net/M0relia/artic ...
- thinkphp5---join联合查询
使用thinkphp3.2进行联合查询,join联合查询: $list = M('document as d') ->join('tp_admin_column as c on d.cid = ...
- 通过sed -i ,通过准备好的sh脚本,来设置linux iptable白名单
通过准备好的sh脚本,来设置linux iptable白名单 特定字符串的行前插入新行 sed -i '/特定字符串/i 新行字符串' file #!/bin/bash del_stdin_buf() ...
- win10磁盘分区
注意:未分配的磁盘是无法使用的. 安装系统的时候,我们可以先将系统装起来,再来对未分配的磁盘进行操作. 具体步骤:https://jingyan.baidu.com/article/fcb5aff76 ...
- redis连接池——JedisPool和JedisCluster的介绍与使用
目录 Jedis使用方式的介绍 Redis连接池介绍 创建连接池配置文件 单机版的Redis连接池 集群版的Redis连接池 总结 Jedis使用方式的介绍 Jedis就是Java实现的操作Redis ...
- [LeetCode] 191. Number of 1 Bits 二进制数1的个数
Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...