How do I download a file with Angular2 or greater

Question

I have a WebApi   MVC app for which I am developing an angular2 client  to replace MVC   I am having some troubles understanding how Angular saves a file   The request is ok  works fine with MVC  and we can log the data received  but I can t figure out how to save the downloaded data  I am mostly following the same logic as in this post   I am sure it is stupidly simple  but so far I am simply not grasping it   The code of the component function is below  I ve tried different alternatives  the blob way should be the way to go as far as I understood  but there is no function createObjectURL in URL  I can t even find the definition of URL in window  but apparently it exists  If I use the FileSaver js module I get the same error  So I guess this is something that changed recently or is not yet implemented  How can I trigger the file save in A2     downloadfile type  string        let thefile           this pservice downloadfile this rundata name  type           subscribe data   gt  thefile   new Blob  data     type   application octet-stream        console log data                       error   gt  console log  Error downloading the file                              gt  console log  Completed file download           let url   window URL createObjectURL thefile       window open url       For the sake of completeness  the service that fetches the data is below  but the only thing it does is to issue the request and pass on the data without mapping if it succeeds   downloadfile runname  string  type  string      return this authHttp get  this files api   this title       runname      file    type               catch this logAndPassOn

User · Accepted Answer

The problem is that the observable runs in another context, so when you try to create the URL var, you have an empty object and not the blob you want.

One of the many ways that exist to solve this is as follows:

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

When the request is ready it will call the function "downloadFile" that is defined as follows:

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

the blob has been created perfectly and so the URL var, if doesn't open the new window please check that you have already imported 'rxjs/Rx' ;

  import 'rxjs/Rx' ;

I hope this can help you.

User · Answer

For those using Redux Pattern  I added in the file-saver as  Hector Cuevas named in his answer  Using Angular2 v  2 3 1  I didn t need to add in the  types file-saver   The following example is to download a journal as PDF   The journal actions    public static DOWNLOAD JOURNALS     Journals  Download as PDF   public downloadJournals referenceId  string   Action    return      type  JournalActions DOWNLOAD JOURNALS     payload    referenceId  referenceId          public static DOWNLOAD JOURNALS SUCCESS     Journals  Download as PDF Success   public downloadJournalsSuccess blob  Blob   Action    return      type  JournalActions DOWNLOAD JOURNALS SUCCESS     payload    blob  blob           The journal effects   Effect   download    this actions       ofType JournalActions DOWNLOAD JOURNALS       switchMap   payload     gt          this  journalApiService downloadJournal payload referenceId           map  blob    gt  this  actions downloadJournalsSuccess blob            catch  err    gt  handleError err  this  actions downloadJournalsFail err             Effect   downloadJournalSuccess    this actions       ofType JournalActions DOWNLOAD JOURNALS SUCCESS       map   payload     gt  saveBlobAs payload blob   journal pdf      The journal service  public downloadJournal referenceId  string   Observable lt any gt        const url      this  config momentumApi  api journals   referenceId  download       return this  http getBlob url       The HTTP service  public getBlob    url  string   Observable lt any gt    gt        return this request           method  RequestMethod Get          url  url          responseType  ResponseContentType Blob              The journal reducer Though this only sets the correct states used in our application I still wanted to add it in to show the complete pattern   case JournalActions DOWNLOAD JOURNALS      return Object assign     state   lt IJournalState gt   downloading  true  hasValidationErrors  false  errors            case JournalActions DOWNLOAD JOURNALS SUCCESS      return Object assign     state   lt IJournalState gt   downloading  false  hasValidationErrors  false  errors             I hope this is helpful

User · Answer

If you only send the parameters to a URL  you can do it this way   downloadfile runname  string  type  string   string      return window location href      this files api   this title       runname      file    type        in the service that receives the parameters

User · Answer

If a tab opens and closes without downloading anything  i tried following with mock anchor link and it worked   downloadFile x  any    var newBlob   new Blob  x     type   application octet-stream              IE doesn t allow using a blob object directly as link href        instead it is necessary to use msSaveOrOpenBlob     if  window navigator  amp  amp  window navigator msSaveOrOpenBlob          window navigator msSaveOrOpenBlob newBlob         return                For other browsers          Create a link pointing to the ObjectURL containing the blob      const data   window URL createObjectURL newBlob        var link   document createElement  a        link href   data      link download    mapped xlsx          this is necessary as link click   does not work on the latest firefox     link dispatchEvent new MouseEvent  click     bubbles  true  cancelable  true  view  window           setTimeout function               For Firefox it is necessary to delay revoking the ObjectURL       window URL revokeObjectURL data         link remove           100

User · Answer

It will be better if you try to call the new method inside you subscribe      this  reportService getReport        subscribe  data  any    gt            this downloadFile data                   error  any    gt   onsole log error                gt  console log  Complete            Inside downloadFile data  function we need to make block  link  href and file name  downloadFile data  any  type  number  name  string        const blob   new Blob  data    type   text csv         const dataURL   window URL createObjectURL blob           IE doesn t allow using a blob object directly as link href        instead it is necessary to use msSaveOrOpenBlob     if  window navigator  amp  amp  window navigator msSaveOrOpenBlob          window navigator msSaveOrOpenBlob blob         return             const link   document createElement  a        link href   dataURL      link download    export file csv       link click         setTimeout      gt              For Firefox it is necessary to delay revoking the ObjectURL       window URL revokeObjectURL dataURL            100

User · Answer

How about this   this http get targetUrl  responseType ResponseContentType Blob            catch  err   gt  return  do yourself             subscribe  res Response   gt             var a   document createElement  a              a href   URL createObjectURL res blob               a download   fileName               start download           a click                 I could do with it  no need additional package

User · Answer

To download and show PDF files  a very similar code snipped is like below     private downloadFile data  Response   void       let blob   new Blob  data blob       type   application pdf          let url   window URL createObjectURL blob       window open url          public showFile fileEndpointPath  string   void       let reqOpt  RequestOptions   this getAcmOptions         getAcmOptions is our helper method  Change this line according to request headers you need      reqOpt responseType   ResponseContentType Blob      this http        get fileEndpointPath  reqOpt         subscribe          data   gt  this downloadFile data           error   gt  alert  Error downloading file                  gt  console log  OK

User · Answer

I found the answers so far lacking insight as well as warnings  You could and should watch for incompatibilities with IE10   if you care    This is the complete example with the application part and service part after  Note that we set the observe   response  to catch the header for the filename  Also note that the Content-Disposition header has to be set and exposed by the server  otherwise the current Angular HttpClient will not pass it on  I added a dotnet core piece of code for that below   public exportAsExcelFile dataId  InputData        return this http get this apiUrl    event export   event id              responseType   blob           observe   response         pipe          tap response   gt                this downloadFile response body  this parseFilename response headers get  Content-Disposition                           private downloadFile data  Blob  filename  string        const blob   new Blob  data    type   application vnd openxmlformats-officedocument spreadsheetml sheet charset utf-8          if  navigator msSaveBlob       IE 10          navigator msSaveBlob blob  filename         else           const link   document createElement  a            if  link download     undefined                   Browsers that support HTML5 download attribute             const url   URL createObjectURL blob               link setAttribute  href   url               link setAttribute  download   filename               link style visibility    hidden               document body appendChild link               link click                document body removeChild link                      private parseFilename contentDisposition   string       if   contentDisposition  return null      let matches    filename         g exec contentDisposition        return matches  amp  amp  matches length  gt  1   matches 1    null      Dotnet core  with Content-Disposition  amp  MediaType   private object ConvertFileResponse ExcelOutputDto excelOutput                if  excelOutput    null                        ContentDisposition contentDisposition   new ContentDisposition                               FileName   excelOutput FileName Contains  excelExportService XlsxExtension    excelOutput FileName    TeamsiteExport xlsx                   Inline   false                            Response Headers Add  Access-Control-Expose-Headers    Content-Disposition                Response Headers Add  Content-Disposition   contentDisposition ToString                 return File excelOutput ExcelSheet   application vnd openxmlformats-officedocument spreadsheetml sheet                      else                       throw new UserFriendlyException  The excel output was empty due to no events

User · Answer

Try this   1 - Install dependencies for show save open file pop-up  npm install file-saver --save npm install  types file-saver --save   2- Create a service with this function to recive the data  downloadFile id   Observable lt Blob gt        let options   new RequestOptions  responseType  ResponseContentType Blob         return this http get this  baseUrl         id  options           map res   gt  res blob             catch this handleError      3- In the component parse the blob with  file-saver   import  saveAs as importedSaveAs  from  file-saver      this myService downloadFile this id  subscribe blob   gt                importedSaveAs blob  this fileName                     This works for me

User · Answer

Well  I wrote a piece of code inspired by many of the above answers that should easily work in most scenarios where the server sends a file with a content disposition header  without any third-party installations  except rxjs and angular   First  how to call the code from your component file  this httpclient get        myBackend               observe   response         responseType   blob         pipe first     subscribe response   gt  SaveFileResponse response   Custom File Name extension       As you can see  it s basically pretty much the average backend call from angular  with two changes   I am observing the response instead of the body I am being explicit about the response being a blob   Once the file is fetched from the server  I am in principle  delegating the entire task of saving the file to the helper function  which I keep in a separate file  and import into whichever component I need to  export const SaveFileResponse     response  HttpResponse lt Blob gt     filename  string   null    gt           null-checks  just because  P     if  response    null    response body    null          return       let serverProvidesName  boolean   true      if  filename    null          serverProvidesName   false         assuming the header is something like       content-disposition  attachment  filename TestDownload xlsx  filename  UTF-8  TestDownload xlsx     if  serverProvidesName          try               let f  string   response headers get  content-disposition   split      1               if  f includes  filename                     filename   f substring 10                     catch         SaveFile response body  filename        Create an anchor element  attach file to it  and   programmatically click it   export const SaveFile    blobfile  Blob  filename  string   null    gt        const a   document createElement  a        a href   window URL createObjectURL blobfile       a download   filename      a click        There  no more cryptic GUID filenames  We can use whatever name the server provides  without having to specify it explicitly in the client  or  overwrite the filename provided by the server  as in this example   Also  one can easily  if need be  change the algorithm of extracting the filename from the content-disposition to suit their needs  and everything else will stay unaffected - in case of an error during such extraction  it will just pass  null  as the filename   As another answer already pointed out  IE needs some special treatment  as always  But with chromium edge coming in a few months  I wouldn t worry about that while building new apps  hopefully   There is also the matter of revoking the URL  but I m kinda not-so-sure about that  so if someone could help out with that in the comments  that would be awesome

User · Answer

This answer suggests that you cannot download files directly with AJAX  primarily for security reasons  So I ll describe what I do in this situation   01  Add href attribute in your anchor tag inside the component html file  eg -   lt div gt          lt a  href   fileUrl  mat-raised-button  click   getGenaratedLetterTemplate element   gt  GENARATE  lt  a gt   lt  div gt    02  Do all following steps in your component ts to bypass the security level and bring the save as popup dialog  eg -  import   environment   from  environments environment   import   DomSanitizer   from   angular platform-browser   export class ViewHrApprovalComponent implements OnInit   private apiUrl   environment apiUrl    fileUrl  constructor      private sanitizer  DomSanitizer      private letterService  LetterService     getGenaratedLetterTemplate letter         this data getGenaratedLetterTemplate letter letterId  subscribe           cannot download files directly with AJAX  primarily for security reasons       console log this apiUrl    getGeneratedLetter     letter letterId       this fileUrl   this sanitizer bypassSecurityTrustResourceUrl this apiUrl    getGeneratedLetter     letter letterId            Note  This answer will work if you are getting an error  OK  with status code 200

User · Answer

I got a solution for downloading from angular 2 without getting corrupt  using spring mvc and angular 2  1st- my return type is  -ResponseEntity from java end  Here I am sending byte   array has return type from the controller   2nd- to include the filesaver in your workspace-in the index page as    lt script src  https   cdnjs cloudflare com ajax libs FileSaver js 2014-11-29 FileSaver min js  gt  lt  script gt    3rd- at component ts write this code   import  ResponseContentType  from   angular core    let headers   new Headers    Content-Type    application json    MyApp-Application     AppName    Accept    application pdf              let options   new RequestOptions   headers  headers  responseType  ResponseContentType Blob                 this http              post   project test export                       somevalue options                 subscribe data   gt                       var mediaType    application vnd ms-excel                     let blob  Blob   data blob                        window  saveAs   blob   sample xls                           This will give you xls file format  If you want other formats change the mediatype and file name with right extension

User · Answer

As mentioned by Alejandro Corredor it is a simple scope error  The subscribe is run asynchronously and the open must be placed in that context  so that the data finished loading when we trigger the download   That said  there are two ways of doing it  As the docs recommend the service takes care of getting and mapping the data       On the service  downloadfile runname  string  type  string     var headers   new Headers      headers append  responseType    arraybuffer      return this authHttp get  this files api   this title       runname      file    type               map res   gt  new Blob  res    type   application vnd openxmlformats-officedocument spreadsheetml sheet                   catch this logAndPassOn       Then  on the component we just subscribe and deal with the mapped data  There are two possibilities  The first  as suggested in the original post  but needs a small correction as noted by Alejandro     On the component downloadfile type  string     this pservice downloadfile this rundata name  type         subscribe data   gt  window open window URL createObjectURL data                      error   gt  console log  Error downloading the file                            gt  console log  Completed file download            The second way would be to use FileReader  The logic is the same but we can explicitly wait for FileReader to load the data  avoiding the nesting  and solving the async problem     On the component using FileReader downloadfile type  string       var reader   new FileReader        this pservice downloadfile this rundata name  type           subscribe res   gt  reader readAsDataURL res                        error   gt  console log  Error downloading the file                              gt  console log  Completed file download           reader onloadend   function  e            window open reader result   Excel    width 20 height 10 toolbar 0 menubar 0 scrollbars no            Note  I am trying to download an Excel file  and even though the download is triggered  so this answers the question   the file is corrupt  See the answer to this post for avoiding the corrupt file

User · Answer

For newer angular versions   npm install file-saver --save npm install  types file-saver --save   import  saveAs  from  file-saver FileSaver    this http get  endpoint     responseType   blob   headers    Accept    application pdf        subscribe blob   gt        saveAs blob   download pdf

User · Answer

Downloading file through ajax is always a painful process and In my view it is best to let server and browser do this work of content type negotiation   I think its best to have    lt a href  api sample download  gt  lt  a gt     to do it  This doesn t even require any new windows opening and stuff like that   The MVC controller as in your sample can be like the one below    HttpGet   action     public async Task lt FileContentResult gt  DownloadFile                    return File dataStream ToArray     text plain    myblob txt

User · Answer

The following code worked for me  let link   document createElement  a    link href   data fileurl    data is object received as response link download   data fileurl substr data fileurl lastIndexOf        1   link click

User · Answer

You may also download a file directly from your template where you use download attribute and to  attr href  you can provide a property value from the component  This simple solution should work on most browsers     lt a download  attr href   yourDownloadLink  gt  lt  a gt    Reference  https   www w3schools com tags att a download asp

User · Answer

Update to Hector s answer using file-saver and HttpClient for step 2   public downloadFile file  File   Observable lt Blob gt        return this http get file fullPath   responseType   blob

User · Answer

Simply put the url as href as below      lt a href  my url  gt Download File lt  a gt

User · Answer

I am using Angular 4 with the 4 3 httpClient object  I modified an answer I found in Js  Technical Blog which creates a link object  uses it to do the download  then destroys it   Client   doDownload id  number  contentType  string        return this http          get this downloadUrl   id toString      headers  new HttpHeaders   append  Content-Type   contentType   responseType   blob   observe   body        downloadFile id  number  contentType  string  filename string          return this doDownload id  contentType  subscribe            res   gt                 var url   window URL createObjectURL res               var a   document createElement  a                document body appendChild a               a setAttribute  style    display  none                a href   url              a download   filename              a click                window URL revokeObjectURL url               a remove       remove the element            error   gt                console log  download error    JSON stringify error                    gt                console log  Completed file download                       The value of this downloadUrl has been set previously to point to the api  I am using this to download attachments  so I know the id  contentType and filename  I am using an MVC api to return the file     ResponseCache Location   ResponseCacheLocation None  NoStore   true       public FileContentResult GetAttachment Int32 attachmentID                 Attachment AT   filerep GetAttachment attachmentID                       if  AT    null                        return new FileContentResult AT FileBytes  AT ContentType                       else                        return null                      The attachment class looks like this    public class Attachment         public Int32 AttachmentID   get  set        public string FileName   get  set        public byte   FileBytes   get  set        public string ContentType   get  set         The filerep repository returns the file from the database   Hope this helps someone

User · Answer

If you don t need to add headers in the request  to download a file in Angular2 you can do a simple  KISS PRINCIPLE   window location href  http   example com myuri report param x    in your component

User · Answer

Here s something I did in my case -     service method downloadFiles vendorName  fileName        return this http get this appconstants filesDownloadUrl    params    vendorName  vendorName  fileName  fileName    responseType   arraybuffer     map  res  ArrayBuffer    gt    return res              catch  error  any    gt   throw  Server error      error          a controller function which actually downloads the file saveData data  fileName        var a   document createElement  a        document body appendChild a       a style    display  none       let blob   new Blob  data     type   octet stream              url   window URL createObjectURL blob       a href   url      a download   fileName      a click        window URL revokeObjectURL url         a controller function to be called on requesting a download downloadFiles         this service downloadFiles this vendorName  this fileName  subscribe data   gt  this saveData data  this fileName   error   gt  console log  Error downloading the file                  gt  console info  OK         The solution is referenced from - here

User · Answer

Download   zip solution for angular 2 4 x  you must import ResponseContentType from   angular http  and change responseType to ResponseContentType ArrayBuffer  by default it ResponseContentType Json   getZip path  string  params  URLSearchParams   new URLSearchParams     Observable lt any gt     let headers   this setHeaders          Content-Type    application zip          Accept    application zip            return this http get    environment apiUrl   path          headers  headers      search  params      responseType  ResponseContentType ArrayBuffer   magic                catch this formatErrors             map  res Response    gt  res   body

User · Answer

I share the solution that helped me  any improvement is greatly appreciated   On your service  pservice       getMyFileFromBackend typeName  string   Observable lt any gt       let param   new URLSearchParams        param set  type   typeName          setting  responseType  2  tells angular that you are loading an arraybuffer     return this http get http   MYSITE API FILEIMPORT   search  params  responseType  2                map res   gt  res text                 catch  error any    gt  Observable throw error     Server error         Component Part    downloadfile type  string      this pservice getMyFileFromBackend typename  subscribe                      res   gt  this extractData res                        error any    gt  Observable throw error     Server error                         extractData res  string          transforme response to blob     let myBlob  Blob   new Blob  res    type   application vnd oasis opendocument spreadsheet        replace the type by whatever type is your response      var fileURL   URL createObjectURL myBlob          Cross your fingers at this point and pray whatever you re used to pray     window open fileURL       On the component part  you call the service without subscribing to a response  The subscribe  for a complete list of openOffice mime types see   http   www openoffice org framework documentation mimetypes mimetypes html

User · Answer

let headers   new Headers                    Content-Type    application json                    MyApp-Application    AppName                    Accept    application vnd ms-excel                              let options   new RequestOptions                   headers  headers                  responseType  ResponseContentType Blob                   this http post this urlName     services exportNewUpc   localStorageValue  options                   subscribe data   gt                        if  navigator appVersion toString   indexOf   NET    gt  0                      window navigator msSaveBlob data blob     Export NewUPC-Items     this selectedcategory         this retailname    Report   this myDate   xlsx                         else                           var a   document createElement  a                            a href   URL createObjectURL data blob                             a download    Export NewUPC-Items     this selectedcategory         this retailname    Report   this myDate    xlsx                           a click                                              this ui loader   false                      this selectedexport   0                     error   gt                        console log error json                         this ui loader   false                      document getElementById  exceptionerror   click

User · Answer

lt a href  my url  download  myfilename  gt Download file lt  a gt   my url should have the same origin  otherwise it will redirect to that location

User · Answer

I was facing this same case today  I had to download a pdf file as an attachment  the file shouldn t be rendered in the browser  but downloaded instead   To achieve that I discovered I had to get the file in an Angular Blob  and  at the same time  add a Content-Disposition header in the response   This was the simplest I could get  Angular 7    Inside the service   getFile id  String   Observable lt HttpResponse lt Blob gt  gt      return this http get    file   id     responseType   blob   observe   response         Then  when I need to download the file in a component  I can simply   fileService getFile  123   subscribe  file  HttpResponse lt Blob gt     gt  window location href   file url     UPDATE   Removed unnecessary header setting from service

User · Answer

This is for folks looking how to do it using HttpClient and file-saver    Install file-saver      npm install file-saver --save      npm install  types file-saver --save   API Service class   export         return this http get this download endpoint            responseType   blob         Component   import   saveAs   from  file-saver   exportPdf         this api service export   subscribe data   gt  saveAs data   pdf report pdf

[javascript] How do I download a file with Angular2 or greater

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to download

Examples related to fileapi