下载A标签上的属性不适用于IE

Question

从下面的代码中我创建了一个下载文件的动态锚标记.此代码适用于Chrome,但不适用于IE.我怎样才能使这个工作

<div id="divContainer">
    <h3>Sample title</h3>
</div>
<button onclick="clicker()">Click me</button>

<script type="text/javascript">

    function clicker() {
        var anchorTag = document.createElement('a');
        anchorTag.href = "http://cdn1.dailymirror.lk/media/images/finance.jpg";
        anchorTag.download = "download";
        anchorTag.click();


        var element = document.getElementById('divContainer');
        element.appendChild(anchorTag);
    }

</script>

Answer 1

Internet Explorer目前不支持标记Download上的属性A.

见http://caniuse.com/download和http://status.modern.ie/excellenceattribute ; 后者表明IE12的功能正在"考虑中".

Answer 2

在我的情况下,由于需要支持IE 11(版本11.0.9600.18665)的使用,我最终使用了@Henners提供的解决方案:

// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, fileName);
}

这很简单实用.

显然,这个解决方案是在dandavis创建的Javascript 下载功能上找到的.

Answer 3

老问题,但我想我会添加我们的解决方案.这是我在上一个项目中使用的代码.它并不完美,但它在所有浏览器和IE9 +中都通过了QA.

downloadCSV(data,fileName){
  var blob = new Blob([data], {type:  "text/plain;charset=utf-8;"});
  var anchor = angular.element('<a/>');

  if (window.navigator.msSaveBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else if (navigator.userAgent.search("Firefox") !== -1) { // Firefox
    anchor.css({display: 'none'});
    angular.element(document.body).append(anchor);

    anchor.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
      target: '_blank',
      download: fileName
    })[0].click();

    anchor.remove();
  } else { // Chrome
    anchor.attr({
      href: URL.createObjectURL(blob),
      target: '_blank',
      download: fileName
    })[0].click();
  }
}

使用ms特定的API在IE中最适合我们.另请注意,某些浏览器要求锚实际位于DOM中以使下载属性起作用,而Chrome则不需要.此外,我们发现Blob在各种浏览器中的工作方式存在一些不一致之处.某些浏览器也有出口限制.这允许每个浏览器中最大可能的CSV导出.

Answer 4

从版本10547+开始,Microsoft Edge浏览器现在支持标签download上的属性a.

<a href="download/image.png" download="file_name.png">Download Image</a>

Edge功能更新:https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/

[下载]标准:http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download