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 目前不支持 A 标签上的 Download 属性。

见http://caniuse.com/download和http://status.modern.ie/adownloadattribute；后者表示该功能在 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 download 函数中找到的。

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();
  }
}

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

Answer 4

自 build 10547+ 起，Microsoft Edge 浏览器现在支持 a 标签上的 download 属性。

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

边缘功能更新：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

Answer 5

此代码片段允许在 IE、Edge 和其他现代浏览器中将 blob 保存在文件中。

var request = new XMLHttpRequest();
request.onreadystatechange = function() {

    if (request.readyState === 4 && request.status === 200) {

        // Extract filename form response using regex
        var filename = "";
        var disposition = request.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        if (window.navigator.msSaveOrOpenBlob) { // for IE and Edge
            window.navigator.msSaveBlob(request.response, filename);
        } else {
            // for modern browsers
            var a = document.createElement('a');
            a.href = window.URL.createObjectURL(request.response);
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    }

    button.disabled = false;
    dragArea.removeAttribute('spinner-visible');
    // spinner.style.display = "none";

};
request.open("POST", "download");
request.responseType = 'blob';
request.send(formData);

对于 IE 和 Edge 使用：msSaveBlob

Answer 6

使用我的功能

它将你的atag绑定到IE中的下载文件

function MS_bindDownload(el) {
    if(el === undefined){
        throw Error('I need element parameter.');
    }
    if(el.href === ''){
        throw Error('The element has no href value.');
    }
    var filename = el.getAttribute('download');
    if (filename === null || filename === ''){
        var tmp = el.href.split('/');
        filename = tmp[tmp.length-1];
    }
    el.addEventListener('click', function (evt) {
        evt.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.onloadstart = function () {
            xhr.responseType = 'blob';
        };
        xhr.onload = function () {
            navigator.msSaveOrOpenBlob(xhr.response, filename);
        };
        xhr.open("GET", el.href, true);
        xhr.send();
    })
}

Answer 7

先添加子元素，然后点击

或者你可以使用 window.location= 'url' ;

Answer 8

正如前面的回答中提到的，IE 不支持下载属性。作为一种解决方法，您可以使用 iFrame 下载文件。这是一个示例代码 sn-p。

function downloadFile(url){
    var oIframe = window.document.createElement('iframe');
    var $body = jQuery(document.body);
    var $oIframe = jQuery(oIframe).attr({
        src: url,
        style: 'display:none'
    });
    $body.append($oIframe);

}

Answer 9

我从here 复制了代码，并针对 ES6 和 ESLint 进行了更新，并将其添加到我的项目中。

您可以将code 保存到download.js 并在您的项目中使用它，如下所示：

import Download from './download'
Download('/somefile.png', 'somefile.png')

请注意，它支持 dataURLs（来自画布对象）等等...有关详细信息，请参阅 https://github.com/rndme。