下载属性在标签不工作在IE中
从下面的代码我创build一个dynamic锚标签下载一个文件。 此代码在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/mediahttp://img.dovov.comfinance.jpg"; anchorTag.download = "download"; anchorTag.click(); var element = document.getElementById('divContainer'); element.appendChild(anchorTag); } </script> Internet Explorer目前不支持A标签上的“ Download属性。
请参阅http://caniuse.com/download和http://status.modern.ie/adownloadattribute ; 后者表示IE12的function是“正在考虑中”。
从版本10547+开始，Microsoft Edge浏览器现在支持标签上的download属性。
<a href="download/image.png" download="file_name.png">Download Image</a>
Edgefunction更新： 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
就我而言，由于需要支持IE 11（版本11.0.9600.18665）的使用，我最终使用@Henners提供的解决scheme对他的评论：
// IE10+ : (has Blob, but not a[download] or URL) if (navigator.msSaveBlob) { return navigator.msSaveBlob(blob, fileName); }
这很简单实用。
显然，这个解决scheme是在dandavis创build的Javascript 下载函数中find的 。
追加孩子，然后点击
或者你可以使用window.location ='url';
老问题，但认为我会添加我们的解决scheme。 这是我在上一个项目中使用的代码。 这并不完美，但它通过了所有浏览器和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则不支持。 此外，我们发现与Blobs在各种浏览器中的工作方式有些不一致。 有些浏览器也有出口限制。 这允许在每个浏览器中最大可能的CSV导出afaik。
此代码片段允许在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
正如在前面的回答中所提到的，在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); }
