• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to download file in angular 6 using ASP.NET Core web API

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

February 21, 2019 by mebakar1005 13 Comments

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.

See also  Complete CRUD operations in ASP.NET Core 2.0 Application

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.

See also  Difference between .NET Core and .NET Framework

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!

How to add Treeview in Angular 6 and Asp.Net Core Application
How to Create CRUD operations using Reactjs and Asp Net Core 2.0

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, ASP.NET Core, web API Tagged With: Angular 6, ASP.NET CORE, File Download

Comments

  1. Jan says

    July 16, 2019 at 2:03 pm

    Hey, what if i wanted to download 2/multiple files, one after another? Do you have any suggestions?

    Reply
  2. Anus says

    September 29, 2019 at 6:12 pm

    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

    Reply
    • mebakar1005 says

      September 29, 2019 at 9:29 pm

      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.

      Reply
  3. Anus says

    September 30, 2019 at 5:25 pm

    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

    Reply
    • mebakar1005 says

      September 30, 2019 at 9:54 pm

      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/

      Reply
  4. Chris says

    December 3, 2019 at 2:36 am

    Hi,

    Im getting this errors:

    Property ‘map’ does not exist on type ‘Observable’
    Cannot find name ‘ResponseContentType’.

    Im using Angular 8, any suggestion?

    Reply
    • Kaushik Agrawal says

      December 12, 2019 at 4:25 pm

      use ‘blob’ instead using ResponseContentType.Blob in angular 8. and use map inside .pipe() then it will work.

      Reply
      • NK says

        January 31, 2020 at 5:47 pm

        .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} )

        Reply
  5. Kaushik Agrawal says

    December 12, 2019 at 4:22 pm

    works perfectly. well done MEBAKAR1005. It help me a lot

    Reply
    • NK says

      January 31, 2020 at 6:17 pm

      .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} )

      Reply
      • Mohit says

        November 9, 2021 at 1:23 pm

        I am getting the same error along with cannot find name saveAs, even though I did npm install save

        Reply
  6. prakash says

    December 23, 2019 at 5:34 pm

    Its working fine. Thanks

    Reply
  7. Sam says

    April 28, 2020 at 6:27 pm

    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);
    . …..
    }

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
  • Most Popular Dating Apps For Black Gay – Remanufactured Online Hookup for Gays
Copyright © 2022