The URL. createObjectURL() static method creates a string containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.
createObjectURL is a static method provided by the URL Web API. Returns a DOMString containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
Blob URLs contain pseudo protocols that can create a temporary URL to audio and video files. This type of URL essentially acts as a fake source for the media on the website, so you can't download it directly. Instead, you have to use third-party conversion tools.
Blob URL/Object URL is a pseudo protocol to allow Blob and File objects to be used as URL source for things like images, download links for binary data and so forth. For example, you can not hand an Image object raw byte-data as it would not know what to do with it.
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();
URL.revokeObjectURL(a.href)
a.remove();
}
};
Note: Please change the type of your file, if needed.
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);
}
//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();
}
For inside iframe download in Internet Explorer 11, you need to use parent.window.navigator.msSaveOrOpenBlob(blob, "filename.ext");
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With