Angular File Download From API | Download File Using Angular
Angular File Download From API | Download File Using Angular
This video has demonstration of downloading file using angular from Rest API. I have shown Download file using angular in a detailed way in this video.
---------------------------------------------------------------------------------------------
Angular File Download From API - We have to create an angular service, which interact with the rest api. The service of angular should have logic to download file from api angular way. We can use httpclient to call the Rest api in angular. We have to add the HttpClientModule in app.module.ts. In Angular service, we have to add httpClient.get or post method and should observe response and responsetype should be Blob to Angular download File from Rest API. Becuase in this video, I have demonstrated returning the file name as well from API. The service should be added to app.module.ts file in providers section.
--------------------------------------------------------------------------------------------
In the component, we have to add dependency of the created service and subscribe to the download method of the service to download file using angular. In the subscribe method, we have to read the response header to get the file name which is being returned from Rest API. The header will have content-disposition, we need to split it by semi colon(;) and then by equals(=) to get the file name. Then we have to create Blob from the Response Body. Response Body will have file content that we do file download in angular. We have to create a hyperlink. Its href should be URL form of Blob which we can get using window.CreateURLFromObject and the file name should be mentioned in download property of the hyperlink.
--------------------------------------------------------------------------------------------
You may encounter CORS issue if the angular app is running on a different url and the api is running at the different url. CORS should be enabled at the API end. CORS will add the required headers to allow angular download file.
As we are reading the file name from api while downloading the file in angular, at the api end, it should allow reading content-disposition header.
---------------------------------------------------------------------------------------------
#AngularDownloadFileRestAPI# #AngularDownloadFile# #AngularFileDownloadFromAPI#
Chapters
00:00 - Intro
Buy Me A Coffee - https://www.buymeacoffee.com/azuretea...