Download PDF file with button click using jQuery
Clicking the download button will call the DownloadFileJavaScript function.
Within the DownloadFile JavaScript function, the URL of the file is passed as a parameter to the jQuery AJAX function.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="Download PDF File" onclick="DownloadFile('Sample.pdf')" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
function DownloadFile(fileName) {
//Set the File URL.
var url = "Files/" + fileName;
$.ajax({
url: url,
cache: false,
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 2) {
if (xhr.status == 200) {
xhr.responseType = "blob";
} else {
xhr.responseType = "text";
}
}
};
return xhr;
},
success: function (data) {
//Convert the Byte Data to BLOB object.
var blob = new Blob([data], { type: "application/octetstream" });
//Check the Browser type and download the File.
var isIE = false || !!document.documentMode;
if (isIE) {
window.navigator.msSaveBlob(blob, fileName);
} else {
var url = window.URL || window.webkitURL;
link = url.createObjectURL(blob);
var a = $("<a />");
a.attr("download", fileName);
a.attr("href", link);
$("body").append(a);
a[0].click();
$("body").remove(a);
}
}
});
};
</script>
</body>
</html>