You'll use an anchor tag pointing to the file with the href attribute. The download attribute informs the browser that it shouldn't follow the link but rather download the URL target. You can also specify its value in order to set the name of the file being downloaded.
You can bind any of these attributes with Angular in order to set the URL and filename dynamically:. Older browsers, like the Internet Explorer, might not recognize the download attribute. If there's no download attribute, the filename for your download will solely depend on the HTTP header Content-Disposition sent by the server that's providing the file.
The information from this header might also take precedence even if the download attribute is present. A link-based solution conforms well to HTML standards and lets the browser do most of the work. However, if you want more control over the download and would like to display some custom progress indicator you can also download files via Angular's HttpClient. A file is best represented as a Blob in the browser:. The Blob object represents a blob, which is a file-like object of immutable, raw data -- MDN web docs.
By specifying the responseType option we can perform a GET request returning a blob representing the downloaded file. Let's assume we've got a designated DownloadService doing just that:. A component would then be able to call this service, subscribe to the corresponding observable and eventually save the file like this:. Here, we're creating an anchor tag programmatically when the blob arrives. With URL. Finally, we click the link like the user would've done with a regular browser download link.
After the file is downloaded, we'll discard the blob by revoking the object URL we created. This approach is pretty verbose though and might not work smoothly for every browser.
Therefore I'd advise you to use the popular library FileSaver. The saving then becomes a one-liner:. If you don't like adding a dependency for this and would prefer to use the manual approach shown before, you might as well refactor the code for saving the blob into a separate service.
You can also create a custom injection token for URL - also see below how we'll do this for FileSaver. By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events. We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents. Our HTTP request will eventually look like follows:. Since we don't just want to forward these events to every component, our service has to do some more work.
Find centralized, trusted content and collaborate around the technologies you use most. Connect and share knowledge within a single location that is structured and easy to search. The browser displays the download window, but when I download the file is corrupted and cannot open it I check with postman and the file is generated OK from the server.
Unfortunately angular2 http object by now is not complete and this solution although useful feels hacky. How are we doing? Please help us improve Stack Overflow. Take our short survey. Stack Overflow for Teams — Collaborate and share knowledge with a private group.
Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Asked 5 years, 4 months ago. The above line shows the file content on browser, so it does not give you save as option. The above line uses ready-made FileSaver module that will open the file with Save as option. I have created service class to fetch file data from a server URL but I need to provide a link or button for downloading the file.
In the view file I will give users two options for downloading the same file. I will use link as well as button for downloading the same file from the server.
In the service class I have used Http module which may not be found automatically. So I need to register it in providers array of NgModule. Run the Angular application angular-file-download by executing command ng serve --open. When you click on link or button for downloading file you will see below page with file save option:.
When you use the code for displaying data on browser inside download function of controller code and click on button or link, then you should see below output:. For server side code you can read the post on Download file using Angular and Spring Boot. Hi, There is no such step other than running the command for installing file-saver package. You can check what goes wrong in the browser conaole. If only more tutorials on Angular were as succinctly and thoughtfully written as this.
Well done!! I need to show save dialog box to user so he can save file any where.
0コメント