49

从以下代码中，我正在创建一个下载文件的动态锚标记。此代码在 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>
4

9 回答 9

35

Internet Explorer 目前不支持标签Download上的属性。A

见http://caniuse.com/download和http://status.modern.ie/adownloadattribute；后者表示该功能在 IE12 中处于“考虑中”。

于 2013-08-23T16:52:15.520 回答
31

就我而言，由于需要支持使用 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下载功能上找到的。

于 2017-05-31T14:28:51.803 回答
15

老问题，但我想我会添加我们的解决方案。这是我在上一个项目中使用的代码。它并不完美，但它在所有浏览器和 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 导出。

于 2017-03-30T05:47:03.370 回答
5

自 build 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

于 2015-12-10T00:54:12.750 回答
3

此代码片段允许在 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

于 2017-04-07T08:23:23.117 回答
1

使用我的功能

它将您的 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();
    })
}
于 2019-05-25T01:25:58.860 回答
0

正如前面的回答中提到的，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);

}
于 2015-03-26T12:07:22.570 回答
0

先附加孩子，然后单击

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

于 2013-08-23T04:54:07.180 回答
0

我从这里复制了代码并为 ES6 和 ESLint 更新了它，并将其添加到我的项目中。

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

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

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

于 2019-07-04T06:08:12.980 回答