How to download file in angular 6 using ASP.NET Core web API

In this tutorial, we are going to learn how to download file in angular 6 using ASP NET Core web API. This is pretty simple to download any kind of file, like .pdf, .png, .jpg, .doc, .txt, .csv, gif, and xls, from server using Angular 6 and ASP.NET Core web API.

First-of-all, we will create ASP NET Core web API and then we will add some front end code, and then we will write service code for http post request and then we will write some typescript code for downloading file from server.

In one of my previous tutorials, i have posted how to upload file using Angular 6 and ASP NET Core web API. As you see in below screenshot, using this tutorial, file is uploaded to server and then the file name is saved in database.

Download file from server using Angular 6 and ASP NET Core web API

Let’s see how to download file in Angular 6 and ASP NET Core web api in step by step.

Step # 1: Create ASP NET Core web API to download file

In this step, we will create a web API for downloading file using ASP NET Core. So, write this below code within your controller.

Let’s understand the above asp net core web api code.

Line # 3: In this line, we are getting current directory.

Line # 4: In this line, we are getting directory where our file’s folder located.

Line # 5: In this line, we are combining the folder directory path with file name.

Line # 6: In this line we are returning the file stream.

Step # 2: Add front-end code

Now, go to component where you want to implement file downloading code. Open html file and then write this below code in html file. This is just simple button with download() click event.

Step # 3: Create a service

Now, in this step, we will create a service. We will add http post request to call web API. And this service will return file stream as a result. So, go to project folder structure and then create a new service and then write this below code in your service.

Let’s understand the above code.

Line # 4: Here in this line, we are calling web API with input parameter. And web API is returning the data in the form of file stream.

Step # 4: Install file saver service

Now, in this step, we will install file saver service to download file immediately. So, go to terminal and then run this below command to install file saver.

npm install file-saver –save

Step # 4: Add some typescript code

Now, in this step, we will add some typescript code to download file using Angular 6 and ASP NET Core web api. So, write this below code in your typescript file.

Let’s understand the above code.

Line # 2: we are getting file name with extension.

Line # 4 to 45: Here in these lines, we are getting file extension. And then getting the exact file type.

Line # 46: Here in this line, we are calling the download service with two parameters fileName and fileType.

Line # 49: Here in this line, after getting successful api call, we are calling saveAs function from file saver service which we have install above. There are two parameters in saveAs function. The one (success) is for data and the other one (fileName) is for file name.

Now, run project and then click on “download” button and then you will see file will be downloaded within seconds.

Thank you for reading. Please keep visiting and sharing!