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 can I become an Angular expert from a beginner level?
- How can I use Angular to zoom in and out of a div?
- How can I migrate my existing application to AngularJS?
- How can I use Angular and Zorro together to create a software application?
- How can I use Angular to zoom in on an image?
- How do I install Yarn using Angular?
- How do I use Angular Zone to run my code?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I integrate an Angular Yandex Map into my software development project?
- How can I use AngularJS to create a zone in my software development project?
See more codes...