Develop Reference

Download PDF file with AJAX and HTML button (no jquery)

I want to download a PDF file when I press an HTML button. I want the click event to be in a JS file.
I need something that do the same thig as the code below but in a JS file :
<a href="url" download>
<button>Download</button>
</a>
I tried to follow this but it doesn't create my button:
var req = new XMLHttpRequest();
req.open("GET", "url", true);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
// test for IE
if (typeof window.navigator.msSaveBlob === 'function') {
window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
} else {
var blob = req.response;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "PdfName-" + new Date().getTime() + ".pdf";
// append the link to the document body
document.body.appendChild(link);
link.click();
}
}
};
req.send();

If you already have the URL, and you just want the file to be downloaded, use an invisible link, and click it for the user:
function triggerDownload(url, filename) {
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.style.display = `none`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
Note the adding to the document, which is required for the link to count as a real link.

Just made it work, here is my working code
const blob = new Blob([response], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "filename.pdf";
link.click();

I would agree with mike, you don't need any ajax to download it
if you want to add the timestamp for when you downloaded it, just change the download attribute dynamical
Download
or better yet add it in the backend using content-disposition attachment header

How to download a file from URL using JavaScript or jQuery?

I used jQuery fileDownload plugin to download a file from URL.
$.fileDownload(url,{
contentType: "text/csv",
contentDisposition: 'attachment; filename=' +
url.split("/").pop()
})
.done(function(){console.log('successfully downladed')})
.fail(function(){ console.log(`request failed`)});
I even tried with JavaScript but it's not working
var a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
fileName = url.split("/").pop();
a.download = fileName
a.click();
window.URL.revokeObjectURL(url);
a.remove();

Your JavaScript does not work probably because you append a to body before you add href and download attributes.
Append just before triggering click
Also remember that this will only work on files with the same-origin URLs (Source).
This attribute only works for same-origin URLs.
var a = document.createElement("a");
a.href = url;
fileName = url.split("/").pop();
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
a.remove();

This code snippet will download from external source
<a onclick="saveFile('url')">Download</a>
<script>
function saveFile(url) {
// Get file name from url.
var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
a.download = filename; // Set the file name.
a.style.display = 'none';
document.body.appendChild(a);
a.click();
delete a;
};
xhr.open('GET', url);
xhr.send();
}
</script>
the saveFile('url') takes string url as an argument so pass in the correct url and your file will download directly. Worked for me

Save Object (.xls file) client side on safari using javascript

In my application I am receiving a large file from sever (in post response) and I want to download it at client side using javascript. I fount out there is a download attribute that works with chrome and there is a msSaveBlob function that works with IE. But none of them works with Safari. how can I fix the safari? below is my code:
$scope.saveAs = function (data, filename, type) {
if (angular.isUndefined(type)) {
type = 'application/vnd.ms-excel';
}
var blob = new Blob([data], {'type': type});
if (angular.isDefined(window.navigator.msSaveBlob)) {
// IE workaround for HTML7007
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 (angular.isUndefined(a.download)) {
window.location = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
} else {
window.location = downloadUrl;
}
setTimeout(function () {
URL.revokeObjectURL(downloadUrl);
}, 100); // cleanup
}
};

How to download file using JavaScript only

I have an only JavaScript page and .asmx page. I want to download file
using only JavaScript how can I download the file. I want to download a particular resume.
I am getting resume here,
var res = data[i].resume;

You may use different third-party libraries:
jQuery.fileDownload
It takes URL as an input and downloads a file while shows a loading dialog.
Github: https://github.com/johnculviner/jquery.fileDownload
Demo: http://jqueryfiledownload.apphb.com/
Usage:
$.fileDownload(requestUrl, {
preparingMessageHtml: "Downloading...",
failMessageHtml: "Error, please try again."
});
FileSaver.js
It takes Blob object as an input and downloads it. Blob can be acquired using XMLHttpRequest.
Github: https://github.com/eligrey/FileSaver.js/
Demo: http://eligrey.com/demos/FileSaver.js/
Usage:
var xhr = new XMLHttpRequest();
xhr.open("GET", requestUrl);
xhr.responseType = "blob";
xhr.onload = function () {
saveAs(this.response, 'filename.txt'); // saveAs is a part of FileSaver.js
};
xhr.send();
It may also be used to save canvas-based images, dynamically generated text and any other Blobs.
Or write it yourself
function saveData(blob, fileName) // does the same as FileSaver.js
{
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
Now, if it is a text file, you can simply download it, create a blob, and save it:
$.ajax({
url: requestUrl,
processData: false,
dataType: 'text'
}).done(function(data) {
var blob = new Blob([data], { type: "text/plain; encoding=utf8" });
saveData(blob, 'filename.txt');
});
Or you can use XMLHttpRequest which works great for any types of files, including binary:
var xhr = new XMLHttpRequest();
xhr.open("GET", requestUrl);
xhr.responseType = "blob";
xhr.onload = function () {
saveData(this.response, 'filename'); // saveAs is now your function
};
xhr.send();
Here is the working demo. Note that this fiddle downloads a file right after opening it. The file is just a random source file from GitHub.

Actually, There is a javascript library called FileSaver.js, FileSaver.js saving file on the client-side. it can help you achieve this.
here: https://github.com/eligrey/FileSaver.js
Usage:
<script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
<script>
function SaveAsFile(t,f,m) {
try {
var b = new Blob([t],{type:m});
saveAs(b, f);
} catch (e) {
window.open("data:"+m+"," + encodeURIComponent(t), '_blank','');
}
}
SaveAsFile("text","filename.txt","text/plain;charset=utf-8");
</script>

If you use jQuery you can do some like that:
var getFile = function( path_to_file, callback ) {
$.ajax( {
url: path_to_file,
success: callback
} );
};
getFile( 'path_to_your_asmx_page', function( file_as_text ) {
console.log( file_as_text );
} );
Call getFile and you'll get file content in callback function

Use the code below.
var sampleBytes = base64ToArrayBuffer('THISISTHETESTDATA');
saveByteArray([sampleBytes], 'ashok.text');
function base64ToArrayBuffer(base64)
{
var binaryString = window.atob(base64);
var binaryLen = binaryString.length;
var bytes = new Uint8Array(binaryLen);
for (var i = 0; i < binaryLen; i++)
{
var ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes;
}
var saveByteArray = (function ()
{
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, name) {
var blob = new Blob(data, {type: "text/plain"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
};
}());

document.getElementById('a').click() doesn't works in IE

I have a code which worked in Chrome and Firefox but not work in IE. It downloads a file stored in a mysql db as a blob record by a link.
Could anyone propose a solution that also works in IE?
The code:
function download(filename, data) {
var a = document.createElement("a");
var blob = b64toBlob(data, "application/octet-stream");
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
document.getElementById('a').click();
window.URL.revokeObjectURL(url);
}

In IE 8 and 9, data URIs can only be used for images, but not for navigation or JavaScript generated file downloads:
function download(filename, data) {
var a = document.createElement("a");
var blob = b64toBlob(data, "application/octet-stream");
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
navigator.msSaveBlob(blob, filename);
//document.getElementById('a').onclick();
window.URL.revokeObjectURL(url);
}