前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >文件下载的一些坑(IE 11,edge)angular2为例

文件下载的一些坑(IE 11,edge)angular2为例

作者头像
Tuzei
发布2020-03-16 17:08:10
1.2K0
发布2020-03-16 17:08:10
举报
文章被收录于专栏:Tuzei的笔记

最近项目里关于文件下载的功能遇到了一些坑,项目是用angular2(其实是4不过为了和angularJS1.x区分)写的,所以以这个为例子,但是其实这个坑是所有的都有。 首先前端发送一个get请求,后端返回application/octet-stream类型 首先加一个responseType

代码语言:javascript
复制
this.http.get(url, {
      withCredentials: true,
      responseType : 3
    })

responseType分别对应的类型

代码语言:javascript
复制
export declare enum ResponseContentType {
Text = 0,
Json = 1,
ArrayBuffer = 2,
Blob = 3,
}

我这里是二进制流所以用3 返回之后处理下得到下载的链接

代码语言:javascript
复制
const blob1 = res.blob();
const objectUrl = URL.createObjectURL(blob1);

或者

代码语言:javascript
复制
const blob = new Blob([res['_body']],{type: "application/x-download"});
const objectUrl = URL.createObjectURL(blob);

一般情况下下载触发

代码语言:javascript
复制
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', url);
a.setAttribute('download', name);
a.click();
URL.revokeObjectURL(url);

但是要触发下载后再释放链接,否则就会获取不到链接下载失败

代码语言:javascript
复制
 // 触发下载后再释放链接
        a.addEventListener('click', function() {
          URL.revokeObjectURL(url);
          document.getElementById('download').remove();
        });

但如果按这样会有兼容问题,IE无法触发下载。微软提供了一个解决方案。 navigator.msSaveBlob(res['blob'], name);

所以整体代码就是

代码语言:javascript
复制
 const uA = window.navigator.userAgent;
    const isIE = /msie\s|trident\/|edge\//i.test(uA) && !!("uniqueID" in document || "documentMode" in document || ("ActiveXObject" in window) || "MSInputMethodContext" in window);

const url = URL.createObjectURL(res['blob']);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display:none');
        a.setAttribute('id', 'download');
        a.setAttribute('href', url);
        a.setAttribute('target', '_blank');
        a.setAttribute('download', name); //这个name是下载名.后缀名
        if (isIE) {
          // 兼容IE11无法触发下载的问题
          navigator.msSaveBlob(res['blob'], name);
        } else {
          a.click();
        }
        // 触发下载后再释放链接
        a.addEventListener('click', function() {
          URL.revokeObjectURL(url);
          document.getElementById('download').remove();
        });

以上就基本实现了兼容。不过在Safari的10以下版本还是无法触发下载,不知道还有没有其他的解决方案。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档