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

这很简单实用。

显然，此解决方案是在download创建的Javascript dandavis函数中找到的。

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>

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

使用我的功能

它将您的标签绑定到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中不支持下载属性。作为解决方法，您可以使用iFrames下载文件。这是一个示例代码段。

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（来自canvas对象），以及更多信息。有关详细信息，请参见https://github.com/rndme。

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

9 个答案: