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(";")[1].split("filename=")[1];
                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(";")[1].split("filename=")[1];
                var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode) {//当存在 filename* 时,取filename* 并进行解码(为了解决中文乱码问题)
                    fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
                }

 问题补充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(";")[1].split("filename=")[1];
                var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode) {//当存在 filename* 时,取filename* 并进行解码(为了解决中文乱码问题)
                    fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
                }

                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();
                    }
                }


            });

 

转载于:https://www.cnblogs.com/nanamiao/p/9407576.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值