Open links made by createObjectURL in IE11
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?
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>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();
a.remove();
}
};
Note: Please change the type of your file, if needed.
If data comming 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);
}
上一篇: 如何在ROR（Ruby）中显示PDF？