文件下载的一些坑（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

this.http.get(url, {
      withCredentials: true,
      responseType : 3
    })

responseType分别对应的类型

export declare enum ResponseContentType {
Text = 0,
Json = 1,
ArrayBuffer = 2,
Blob = 3,
}

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

const blob1 = res.blob();
const objectUrl = URL.createObjectURL(blob1);

或者

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

一般情况下下载触发

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

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

 // 触发下载后再释放链接
        a.addEventListener('click', function() {
          URL.revokeObjectURL(url);
          document.getElementById('download').remove();
        });

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

所以整体代码就是

 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 删除

angular2