Vfrdtyky

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<Blob> {

    let options = new RequestOptions({responseType: ResponseContentType.Blob });

    return this.http.get(this._baseUrl + '/' + id, options)

        .map(res => 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 => {

            importedSaveAs(blob, this.fileName);

        }

    )

This works for me!

If you don't need to add headers in the request, to download a file in Angular2 you can do a simple:

window.location.href='http://example.com/myuri/report?param=x';

in your component.

This is for folks looking how to do it using HttpClient and file-saver:

1. 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 => saveAs(data, `pdf report.pdf`));

}

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 => 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 => window.open(window.URL.createObjectURL(data)),

                  error => console.log("Error downloading the file."),

                  () => 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 => reader.readAsDataURL(res), 

                    error => console.log("Error downloading the file."),

                    () => 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.

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<any> {

 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) => res['_body']);

}

How about this?

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})

        .catch((err)=>{return [do yourself]})

        .subscribe((res:Response)=>{

          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.

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 => {

    saveAs(blob, 'download.pdf');

  });

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

<a href="api/sample/download"></a> 

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<FileContentResult> DownloadFile()

{

    // ...

    return File(dataStream.ToArray(), "text/plain", "myblob.txt");

}

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

        this._journalApiService.downloadJournal(payload.referenceId)

        .map((blob) => this._actions.downloadJournalsSuccess(blob))

        .catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))

    );



@Effect() downloadJournalSuccess$ = this.actions$

    .ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)

    .map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))

The journal service

public downloadJournal(referenceId: string): Observable<any> {

    const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;

    return this._http.getBlob(url);

}

The HTTP service

public getBlob = (url: string): Observable<any> => {

    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, <IJournalState>{ downloading: true, hasValidationErrors: false, errors:  });

}



case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {

  return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors:  });

}

I hope this is helpful.

I share the solution that helped me (any improvement is greatly appreciated)

On your service 'pservice' :

getMyFileFromBackend(typeName: string): Observable<any>{

    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 => res.text())

            .catch((error:any) => Observable.throw(error || 'Server error'));

}

Component Part :

downloadfile(type: string){

   this.pservice.getMyFileFromBackend(typename).subscribe(

                    res => this.extractData(res),

                    (error:any) => 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

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 => this.downloadFile(data),

        error => alert("Error downloading file!"),

        () => console.log("OK!")

      );

  }

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 => { 

            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 => {

            console.log('download error:', JSON.stringify(error));

        }, () => {

            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 :)

Update to Hector's answer using file-saver and HttpClient for step 2:

public downloadFile(file: File): Observable<Blob> {

    return this.http.get(file.fullPath, {responseType: 'blob'})

}

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) => { return res; })

        .catch((error: any) => _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 => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),

        () => console.info("OK"));

}

The solution is referenced from - here

It will be better if you try to call the new method inside you subscribe

this._reportService.getReport()

    .subscribe((data: any) => {

        this.downloadFile(data);

    },

        (error: any) => onsole.log(error),

        () => 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 && window.navigator.msSaveOrOpenBlob) {

      window.navigator.msSaveOrOpenBlob(blob);

      return;

    }



    const link = document.createElement('a');

    link.href = dataURL;

    link.download = 'export file.csv';

    link.click();



    setTimeout(() => {



      // For Firefox it is necessary to delay revoking the ObjectURL

      window.URL.revokeObjectURL(dataURL);

      }, 100);

    }

}

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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

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 => {



                  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.

 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 => {

                    if (navigator.appVersion.toString().indexOf('.NET') > 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 => {

                    console.log(error.json());

                    this.ui_loader = false;

                    document.getElementById("exceptionerror").click();

                });

Simply put the url as href as below .

<a href="my_url">Download File</a>