Load tag A attribute that does not work in IE

Question

From the following code, I create a dynamic anchor tag that loads the file. This code works well in Chrome, but not in IE. How can i get this job

<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 does not currently support the Download attribute in A tags.

See http://caniuse.com/download and http://status.modern.ie/adownloadattribute ; the latter indicates that the feature is under review for IE12.

Answer 2

In my case, since there is a requirement to support the use of IE 11 (version 11.0.9600.18665), I ended up using the solution provided by @Henners in his comment:

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

It is quite simple and practical.

Apparently, this solution was found in the Javascript download created by dandavis .

Answer 3

Old question, but I thought I'd add our solution. Here is the code I used in my last project. This is not ideal, but it passed QA in all browsers and IE9 +.

 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 specified API is best for us in IE. Also note that some browsers require the anchor to actually be in the DOM in order to use the download attribute, while Chrome, for example, does not. In addition, we found some inconsistencies in how Blobs work in different browsers. Some browsers also have export restrictions. This allows the maximum possible CSV export in every afaik browser.

Answer 4

As built 10547+, Microsoft Edge browser now supports download the tag attribute a .

<a href="download/image.png" download="file_name.png">Download Image</a>

Edge Function Update: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10547/

[download] standard: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download

Answer 5

This piece of code allows you to save blob in a file in IE, Edge and other modern browsers.

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

To use IE and Edge: msSaveBlob

Answer 6

Use my function

This bind your atag to upload a file in 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

First add a child, and then click

Or you can use window.location = 'url';

Answer 8

As mentioned in an earlier answer, the download attribute is not supported in IE. As a job, you can use iFrames to download the file. Here is an example code snippet.

 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

From here I copied the code, updated it for ES6 and ESLint, and added it to my project.

You can save the code in download.js and use it in your project as follows:

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

Please note that it supports dataURL (from canvas objects) and much more ... see https://github.com/rndme for details .