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.
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!
Hey, what if i wanted to download 2/multiple files, one after another? Do you have any suggestions?
let fileName = this.attachmentFileName;
//file type extension
let checkFileType = fileName.split(‘.’).pop();
Sir , What is this.attachmentFileName; ?
Cannot read property ‘split’ of undefined
i am gettinh this error pls help me
Actually “this.attachmentFileName;” is the file name which you want to download from server. So, give the file name and then the error will be gone.
Very Thanks mebakar1005
error is 415
(this is your api root url)
return this.http.post(“http://localhost:21021/api/services/app/FormAttachment/DownloadFile?fileName=”+input, ”,
what is this i don’t understand (/services/app/FormAttachment/DownloadFile?)
and this is my api
return this.http.post(https://localhost:44310/api+'/PaymentDetail‘,this.formData)
how i put in my api helppp plx last time
I am using swagger for APIs in my project. So, you can get better idea here https://dotnetdetail.net/how-to-add-swagger-to-asp-net-core-3-0-web-api/
Hi,
Im getting this errors:
Property ‘map’ does not exist on type ‘Observable’
Cannot find name ‘ResponseContentType’.
Im using Angular 8, any suggestion?
use ‘blob’ instead using ResponseContentType.Blob in angular 8. and use map inside .pipe() then it will work.
.pipe(
map(
(res) => {
var blob = new Blob([res.blob()], {type: fileExtension} )
return blob;
})
);
im getting error in below line as res.blob does not exist.
var blob = new Blob([res.blob()], {type: fileExtension} )
works perfectly. well done MEBAKAR1005. It help me a lot
.pipe(
map(
(res) => {
var blob = new Blob([res.blob()], {type: fileExtension} )
return blob;
})
);
im getting error in below line as res.blob does not exist.
var blob = new Blob([res.blob()], {type: fileExtension} )
I am getting the same error along with cannot find name saveAs, even though I did npm install save
Its working fine. Thanks
Hi, thank you for you sharing, but its not work for Edge 🙁
// IE and Edge
if (window.navigator && window.navigator.msSaveOrOpenBlob)
{
var fileName = escapeHtml(data.name);
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
else // others
{
var blobURL = URL.createObjectURL(blob);
. …..
}