angularjsHow do I download a file using AngularJS?
The following example demonstrates how to download a file using AngularJS:
// Create a new instance of the http service
var http = new XMLHttpRequest();
// Set the url of the file you want to download
http.open("GET", "http://example.com/file.txt", true);
// Set the response type to blob
http.responseType = "blob";
// Send the request
http.send();
// When the request is complete
http.onload = function() {
// Create a new Blob object using the response data of the onload object
var blob = new Blob([http.response], {type: "text/plain"});
// Create a link element, hide it, direct it towards the blob, and then 'click' it programatically
var a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
// Create a DOMString representing the blob and point the link element towards it
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "file.txt";
// Programatically click the link to trigger the download
a.click();
// Release the reference to the file by revoking the Object URL
window.URL.revokeObjectURL(url);
}
This code will create an instance of the http service, set the url of the file to be downloaded, set the response type to blob, send the request, create a new Blob object using the response data, create a link element, create a DOMString representing the blob and point the link element towards it, programatically click the link to trigger the download, and then release the reference to the file by revoking the Object URL.
Code explanation
- Create a new instance of the http service:
var http = new XMLHttpRequest();
- Set the url of the file you want to download:
http.open("GET", "http://example.com/file.txt", true);
- Set the response type to blob:
http.responseType = "blob";
- Send the request:
http.send();
- Create a new Blob object using the response data:
var blob = new Blob([http.response], {type: "text/plain"});
- Create a link element, hide it, direct it towards the blob, and then 'click' it programatically:
var a = document.createElement("a"); a.style = "display: none"; document.body.appendChild(a);
- Create a DOMString representing the blob and point the link element towards it:
var url = window.URL.createObjectURL(blob); a.href = url; a.download = "file.txt";
- Programatically click the link to trigger the download:
a.click();
- Release the reference to the file by revoking the Object URL:
window.URL.revokeObjectURL(url);
Helpful links
More of Angularjs
- How do I use Angular to zip files?
- How do I use Angular with YAML?
- How do I use AngularJS to zoom in on an image?
- How do I install Yarn using Angular?
- How can I use an Angular YouTube Player in my software development project?
- How can I use AngularJS to create a zone in my software development project?
- How can I use Zone.js with Angular to detect and act upon asynchronous events?
- How can I prevent XSS attacks when using AngularJS?
- How can I prevent XSS attacks when using AngularJS?
- How can I become an Angular expert from a beginner level?
See more codes...