Html 在IE中不工作的标签上下载属性

从下面的代码中，我创建了一个下载文件的动态锚标记。这段代码在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>

示例标题
点击我
函数点击器（）{
var anchorTag=document.createElement（'a'）；
anchorTag.href=”http://cdn1.dailymirror.lk/media/images/finance.jpg";
anchorTag.download=“下载”；
anchorTag.click（）；
var元素=document.getElementById（'divContainer'）；
元素.appendChild（anchorTag）；
}

首先附加子项，然后单击

---

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

Internet Explorer目前不支持

A

标记上的

Download

属性

---

见和；后者表示IE12“正在考虑”该功能。

如前面的回答所述，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);

}

---

从build 10547+开始，Microsoft Edge浏览器现在支持

a

标记上的

download

属性

边缘特征更新：

---

一个[下载]标准：

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

下载CSV（数据、文件名）{
var blob=new blob（[data]，{type:“text/plain；charset=utf-8；”}）；
var anchor=角度元素（“”）；
if（window.navigator.msSaveBlob）{//IE
window.navigator.msSaveOrOpenBlob（blob，文件名）
}else if（navigator.userAgent.search（“Firefox”）！=-1{//Firefox
css（{display:'none'}）；
元素（document.body）.append（anchor）；
anchor.attr({
href:'data:attachment/csv；charset=utf-8，'+encodeURIComponent（数据），
目标：“\u blank”，
下载：文件名
})[0]。单击（）；
锚定。移除（）；
}else{//Chrome
anchor.attr({
href:URL.createObjectURL（blob），
目标：“\u blank”，
下载：文件名
})[0]。单击（）；
}
}

---

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

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

在我的例子中，由于需要支持IE 11（版本11.0.9600.18665）的使用，我最终使用了针对他的评论提供的解决方案：

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

它非常简单实用

显然，这个解决方案是在由创建的Javascript函数上找到的

使用我的功能

它可以绑定您的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();
    })
}

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

您可以将文件保存到

download.js

，并在项目中使用它，如下所示：

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

---

请注意，它支持DataURL（来自画布对象）等。。。有关详细信息，请参阅。

为什么要在第一次单击时添加它？当你可以做location=url时为什么要点击它我看不出创建一个新的标记有什么意义。当你点击“点击我”按钮时，为什么不触发下载呢。如果我先添加child，然后单击，Web用户不喜欢单击以供参考。它重定向到图像而不是下载，因此在IE中没有设置文件名的解决方法？你的问题不够精确。文件传递服务器选择文件名。我在IE中找到了解决方法，而不是为以下行创建

：2017仍然没有IE12。。。但是，Edge支持此功能。这并没有回答“如何使其工作”的问题，这应该如何工作？我在关闭
标记之前添加了一个iframe，其中包含我的文件源。如果标题中的内容配置是附件，它将尝试下载而不是在iframe.header中呈现它（'content-Disposition:attachment；filename=“some filename”'）；我尝试了这个，但得到的斑点是未定义的。你能解释一下如何定义blob以及在其中放什么吗。我只有文件的URL。有没有办法从URL将文件加载到blob中？也许可以帮助您实现所需的转换。之后，您只需按照我的回答触发下载。
target=“blank”
在IE11上对我很好，为什么这不是全部答案？@Kevin您能解释一下数据格式应该是什么吗？OP没有提到Angular，这个答案依赖于Angular。