IE不兼容a标签的download属性

在H5中，为a标签新增了一个download属性，用于文件的下载。但是支持该属性的浏览器也只有Firefox和Chrome。

image.png

download的属性值用来指定下载时显示的文件名，是否使用download属性的区别在于：不加download属性时，浏览器会直接浏览a的href属性值，而加了download属性，会强制下载该href属性值内容。

使用download属性来实现文件下载的代码如下：

function downloadFileFromText(text, window, document, fileName) {
  const bedFile = new Blob([text], { type: 'text/plain' });
  const bedFileUrl = window.URL.createObjectURL(bedFile);
  const tempLink = document.createElement('a');
  document.body.appendChild(tempLink);
  tempLink.href = bedFileUrl;
  tempLink.setAttribute('download', fileName);
  tempLink.click();
  window.URL.revokeObjectURL(bedFileUrl);
  document.body.removeChild(tempLink);
}

这样在IE下是没有任何反应的，也不报错。若要兼容IE可以使用msSaveBlob方法。

function downloadFileFromText(text, window, document, fileName) {
  const bedFile = new Blob([text], { type: 'text/plain' });
  const bedFileUrl = window.URL.createObjectURL(bedFile);
  const tempLink = document.createElement('a');
  document.body.appendChild(tempLink);
  tempLink.href = bedFileUrl;
  tempLink.setAttribute('download', fileName);
  tempLink.click();
  window.URL.revokeObjectURL(bedFileUrl);
  document.body.removeChild(tempLink);
  // for IE
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(bedFile, fileName);
  }
}