74

Why can't you open the link in the following demo:
http://html5-demos.appspot.com/static/a.download.html

You cannot even right click and open it in a new tab/window. Is there any setting in the browser I need to customize?

Improve this question
3
  • Maybe the download attribute used on the a tag is not supported. status.modern.ie/adownloadattribute Commented Jun 3, 2014 at 6:20
  • The download attribute isn't supported in IE and Safari. But I'm not going to download/save the link: as mentioned in my question title it doesn't even open/navigate to the link. Safari works as expected. Here's a demo without the download attribute. Commented Jun 4, 2014 at 5:07
  • Did you have a look here? Looks like the same problem. Commented Jun 21, 2014 at 14:56

5 Answers 5

Reset to default
121
+50

This demo uses Blob URL which is not supported by IE due to security restrictions.

IE has its own API for creating and downloading files, which is called msSaveOrOpenBlob.

Here is my cross-browser solution that works on IE, Chrome and Firefox:

function createDownloadLink(anchorSelector, str, fileName){ if(window.navigator.msSaveOrOpenBlob) { var fileData = [str]; blobObject = new Blob(fileData); $(anchorSelector).click(function(){ window.navigator.msSaveOrOpenBlob(blobObject, fileName); }); } else { var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str); $(anchorSelector).attr("download", fileName); $(anchorSelector).attr("href", url); } } $(function () { var str = "hi,file"; createDownloadLink("#export", str, "file.txt"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="export" class="myButton" download="" href="#">export</a>

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Seems like it doesnt work within a web worker: stackoverflow.com/questions/26928992/…
I really hoped the time of "if stupid internet explorer then" would be over. Thank you for your submission, it helped me a lot.
JS Fiddle recently changed its website to show the result inside iframe. The IE part doesn't work in an iframe. If you try this code in a regular page, it works in IE 11 too.
@robert.bo.roth Do you want to generate PDF on the client side or is the PDF already on server? If it is already on server, I recommend PDF.JS(stackoverflow.com/a/291823/1439313). For client-side pdf generation(on the fly), use jsPDF(parall.ax/products/jspdf)
@robert.bo.roth Unfortunately, IE has no support for inline PDFs. The only way is to show a download link to user. PDFObject(pdfobject.com) can detect browser support and switch between inline PDF and download link.
|
45

Here is the function for downloading any file as blob. (tested on IE and Non-IE)

var download_csv_using_blob = function (file_name, content) { var csvData = new Blob([content], { type: 'text/csv' }); if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE window.navigator.msSaveOrOpenBlob(csvData, file_name); } else { // for Non-IE (chrome, firefox etc.) var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; var csvUrl = URL.createObjectURL(csvData); a.href = csvUrl; a.download = file_name; a.click(); URL.revokeObjectURL(a.href) a.remove(); } };

Note: Please change the type of your file, if needed.

Improve this answer

1 Comment

There's no need to actually append the element to the body, so setting the style and calling remove() are also unnecessary. Tested this on Chrome, FF, and Edge Chromium.
3

If the data is coming from Ajax then you can add

if (window.navigator.msSaveOrOpenBlob) xhttp.responseType = "arraybuffer"; else xhttpGetPack.responseType = "blob";

/////////////////////////////////////////////////

var a = document.createElement("a"); document.body.appendChild(a); a.style.display = "none"; // IE if (window.navigator.msSaveOrOpenBlob) { a.onclick = ((evx) => { var newBlob = new Blob([new Uint8Array(xhttpGetPack.response)]); window.navigator.msSaveOrOpenBlob(newBlob, "myfile.ts"); }); a.click(); } else //Chrome and safari { var file = URL.createObjectURL(xhttpGetPack.response); a.href = file; a["download"] = "myFile.ts"; a.click(); window.URL.revokeObjectURL(file); }
Improve this answer

Comments

1 
 //File Object return in ajax Success in data variable var blob = new Blob([data]); if (navigator.appVersion.toString().indexOf('.NET') > 0) //For IE { window.navigator.msSaveOrOpenBlob(blob, "filename.ext"); } else if (navigator.userAgent.toLowerCase().indexOf('firefox') >-1) { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = "filename.ext"; document.body.appendChild(link);//For FireFox <a> tag event //not working link.click(); } else { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = "filename.ext" link.click(); }
Improve this answer

Comments

1

For inside iframe download in Internet Explorer 11, you need to use parent.window.navigator.msSaveOrOpenBlob(blob, "filename.ext");.

Improve this answer

Comments