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

Question

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

今天网上查了一下，发现主要分两类：

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下就行不通了，提示如下：

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Content-Disposition

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

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

Answer 4

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

Answer 5

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

1. download 也可以接受，但是你没写对呀element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(url));是什么鬼东西。难道不是element.setAttribute('href', url);
   测试地址
2. blob 啥的也是基于download的吧

Answer 6

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