The Excel file can be downloaded as BLOB using jQuery AJAX and XmlHttpRequest (XHR) request. Once the file is successfully sent by the server, it could be downloaded using the
Response object inside the Success event handler of jQuery AJAX function.
In this post I will explain the sample code to download the Excel file using AJAX in jQuery.
Lets say the following javascript function DownloadFile is called when user clicked the Download button on the web page. It accepts an arbitrary parameter fileId, you can use any
other parameter like filename etc.
Inside the DownloadFile function, you can pass the url(or an accessible file path on server) in the URL parameter of the jQuery AJAX call.
Inside the success callback of AJAX function, we can read and download the target file as byte array from the xhr object. We read the response object as Blob.
function DownloadFile(fileId) {
$.ajax({
type: "POST",
url: "MyController/MyAction",
data: JSON.stringify({ fileId: fileId }),
contentType: "application/json; charset=utf-8",
xhrFields: {
responseType: 'blob'
},
success: function (response, status, xhr) {
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var linkelem = document.createElement('a');
try {
var blob = new Blob([response], { type: 'application/octet-stream' });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.target = "_blank";
a.click();
}
} else {
window.location = downloadUrl;
}
}
} catch (ex) {
console.log(ex);
}
},
failure: function (response) {
console.log(response.d);
},
error: function (response) {
console.log(response.d);
}
});
}
You can use the same code to download any binary file, like PDF etc.
Since we are creating html anchor element and simulate click to download file at client. Its good idea to also remove the link once you finished working.
In the following jquery code snippet we are creating anchor element, appending to the body tag and at the end we also removed it.
var a = $("<a />");
a.attr("download", fileName);
a.attr("href", link);
$("body").append(a);
a[0].click();
$("body").remove(a);
