利用javascript或者a标签下载文件的兼容性问题

项目中有上传功能,文件最大300M,文件类型不限。目前需要做下载功能,主要兼容主流浏览器,QQchromeIE11等,所以想利用.

今天网上查了一下,发现主要分两类:

  1. Blob
  2. a 标签

第一种方式由于需要后台支持,并且下载完成浏览器才会有响应,对于大文件下载体验不太好,所以想用第二种方式,关键还简单:

代码如下:

  let _filename = filename || url.substr(url.lastIndexOf('/') + 1)
  
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(url));
  element.setAttribute('download', _filename);
  element.setAttribute('target', '_blank')
  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);

这种方式在chrome下载视频图片都没问题,但是在IE11下就行不通了,提示如下:

图片描述

点击允许显示如下,也找不到下载方式。

图片描述

有什么好办法处理这种需求呢?

阅读 1.2k
评论 更新于 2019-07-31
    6 个回答

    要下载文件肯定已经在服务器了,直接a标签把文件地址放进去下载把

    评论 赞赏 2019-07-31
      Zoro
      • 594

      用blob, 兼容IE 用 navigator.msSaveBlob();

      评论 赞赏 2019-07-31

        比较常用解决方案是后端添加一个响应头

        Content-Disposition

        这样浏览器默认会已附件方式下载,而不是预览.

        https://segmentfault.com/a/11...

        评论 赞赏 2019-08-01

          IE 不支持 a标签的download, download.js ,有npm库,直接使用都兼容

          评论 赞赏 2019-08-01
            linong
            • 11.5k

            Content-Disposition 是最合适的一种方案,他可以定义名称。

            1. download 也可以接受,但是你没写对呀element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(url));是什么鬼东西。难道不是element.setAttribute('href', url);
              测试地址
            2. blob 啥的也是基于download的吧
            评论 赞赏 2019-08-01
              00000
              • 3
              • 新人请关照

              其实使用a标签确实兼容不了,考虑下把a标签更换成iframe标签就好了,也就是你创建a标签的那串代码,改成创建iframe就可以了

              评论 赞赏 2月25日
                撰写回答

                登录后参与交流、获取后续更新提醒