Html A 标签上的下载属性在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18394871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download attribute on A tag not working in IE
提问by Nipuna
From the following code I'm creating a dynamic anchor tag which downloads a file. This code works well in Chrome but not in IE. How can I get this working
从以下代码中，我创建了一个下载文件的动态锚标记。此代码在 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>
采纳答案by EricLaw
Internet Explorer does not presently support the Downloadattribute on Atags.
Internet Explorer 目前不支持标签Download上的属性A。
See http://caniuse.com/downloadand http://status.modern.ie/adownloadattribute; the latter indicates that the feature is "Under consideration" for IE12.
参见http://caniuse.com/download和http://status.modern.ie/adownloadattribute；后者表示该功能在 IE12 中处于“考虑中”。
回答by aribeiro
In my case, since there's a requirement to support the usage of IE 11 (version 11.0.9600.18665), I ended up using the solution provided by @Hennerson his comment:
就我而言，由于需要支持 IE 11（版本 11.0.9600.18665）的使用，我最终使用了@Henners在他的评论中提供的解决方案：
// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) {
return navigator.msSaveBlob(blob, fileName);
}
It's quite simple and practical.
它非常简单实用。
Apparently, this solution was found on the Javascript downloadfunction created by dandavis.
回答by Kevin
Old question, but thought I'd add our solution. Here is the code I used on my last project. It's not perfect, but it passed QA in all browsers and IE9+.
老问题，但我想我会添加我们的解决方案。这是我在上一个项目中使用的代码。它并不完美，但它通过了所有浏览器和 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();
}
}
Using the ms specific API worked best for us in IE. Also note that some browsers require the anchor to actually be in the DOM for the download attribute to work, whereas Chrome, for example, does not. Also, we found some inconsistencies with how Blobs work in various browsers. Some browsers also have an export limit. This allows the largest possible CSV export in each browser afaik.
在 IE 中使用特定于 ms 的 API 最适合我们。另请注意，某些浏览器要求锚点实际位于 DOM 中才能使下载属性起作用，而例如 Chrome 则不需要。此外，我们发现 Blob 在各种浏览器中的工作方式存在一些不一致之处。一些浏览器也有导出限制。这允许在每个浏览器中最大可能的 CSV 导出 afaik。
回答by MWOJO
As of build 10547+, the Microsoft Edge browser is now supporting the downloadattribute on atags.
从 build 10547+ 开始，Microsoft Edge 浏览器现在支持标签download上的属性a。
<a href="download/image.png" download="file_name.png">Download Image</a>
<a href="download/image.png" download="file_name.png">Download Image</a>
Edge features update: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/
Edge 功能更新：https: //dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/
a[download] standard: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download
[下载] 标准：http: //www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download
回答by Alexey
This code fragment allows saving blob in the file in IE, Edge and other modern browsers.
此代码片段允许在 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]*=((['"]).*?|[^;\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);
For IE and Edge use: msSaveBlob
对于 IE 和 Edge 使用：msSaveBlob
回答by EunSeong Lee
Use my function
使用我的功能
It bind your atag to download file in IE
它绑定您的 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();
})
}
回答by Simon Hutchison
I copied the code from hereand updated it for ES6 and ESLint and added it to my project.
我从这里复制了代码并针对 ES6 和 ESLint 更新了它并将其添加到我的项目中。
You can save the codeto download.jsand use it in your project like this:
您可以保存代码来download.js和你的项目像这样使用它：
import Download from './download'
Download('/somefile.png', 'somefile.png')
Note that it supports dataURLs (from canvas objects), and more... see https://github.com/rndmefor details.
请注意，它支持 dataURLs（来自画布对象）等等……详情请参见https://github.com/rndme。
回答by May13ank
As mentioned in earlier answer , download attribute is not supported in IE . As a work around, you can use iFrames to download the file . Here is a sample code snippet.
正如前面的回答中提到的，下载属性在 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);
}
回答by Shadow
Append child first and then click
先附加子项，然后单击
Or you can use window.location= 'url' ;
或者你可以使用 window.location='url' ;
