美文网首页Web前端之路程序员让前端飞
文件下载的一些坑(IE 11,edge)angular2为例

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

作者: Tuzei | 来源:发表于2017-11-28 18:24 被阅读544次

    最近项目里关于文件下载的功能遇到了一些坑,项目是用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以下版本还是无法触发下载,不知道还有没有其他的解决方案。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/ejeouxtx.html