Angular 2 PDF von der API herunterladen und in der Ansicht anzeigen

In der Tat, dieses feature ist noch nicht implementiert in der HTTP-Unterstützung.

Als eine Problemumgehung, die Sie brauchen, um erweitern die BrowserXhr Klasse von Angular2, wie unten beschrieben, um die responseType zu blob auf die zugrunde liegenden xhr-Objekt:

import {Injectable} from 'angular2/core';
import {BrowserXhr} from 'angular2/http';

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.responseType = "blob";
    return <any>(xhr);
  }
}

Dann müssen Sie wickeln Sie die response-payload in ein Blob Objekt und verwenden Sie die FileSaver - Bibliothek zum öffnen der download-dialog:

downloadFile() {
  this.http.get(
    'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe(
      (response) => {
        var mediaType = 'application/pdf';
        var blob = new Blob([response._body], {type: mediaType});
        var filename = 'test.pdf';
        saveAs(blob, filename);
      });
}

Den FileSaver Bibliothek muss eingebunden werden in die HTML-Datei:

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

Sehen diese plunkr: http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

Leider wird die responseType für alle AJAX-Anfragen. Um in der Lage sein, den Wert dieser Eigenschaft, gibt es weitere updates zu tun, in der XHRConnection und Http Klassen.

Als Referenzen finden Sie unter diesen links:

• Download pdf-Datei mithilfe von jquery-ajax
• Erhalten, zip-Datei, angularJs

Bearbeiten

Wenn man ein wenig mehr, ich denke, dass Sie nutzen könnten hierarchische Injektoren und konfigurieren Sie diesen Anbieter nur auf der Ebene der Komponente, die ausgeführt wird, der download:

@Component({
  selector: 'download',
  template: '<div (click)="downloadFile() ">Download</div>'
  , providers: [
    provide(CustomBrowserXhr, 
      { useClass: CustomBrowserXhr }
  ]
})
export class DownloadComponent {
  @Input()
  filename:string;

  constructor(private http:Http) {
  }

  downloadFile() {
    this.http.get(
      'https://mapapi.apispark.net/v1/images/'+this.filename).subscribe(
        (response) => {
          var mediaType = 'application/pdf';
          var blob = new Blob([response._body], {type: mediaType});
          var filename = 'test.pdf';
          saveAs(blob, filename);
        });
    }
}

Diese überschreiben würde, gilt nur für diese Komponente (vergessen Sie nicht, entfernen Sie die entsprechenden stellen bei der bootstrapping-Anwendung). Die download-Komponente verwendet werden könnten, wie:

@Component({
  selector: 'somecomponent',
  template: `
    <download filename="'Granizo.pdf'"></download>
  `
  , directives: [ DownloadComponent ]
})

InformationsquelleAutor der Antwort Thierry Templier

Ich glaube nicht, dass alle diese hacks notwendig sind. Ich habe gerade einen kurzen test mit dem standard-http-service in angular 2.0, und es funktionierte wie erwartet.

/* generic download mechanism */
public download(url: string, data: Object = null): Observable<Response> {

    //if custom headers are required, add them here
    let headers = new Headers();        

    //add search parameters, if any
    let params = new URLSearchParams();
    if (data) {
        for (let key in data) {
            params.set(key, data[key]);
        }
    }

    //create an instance of requestOptions 
    let requestOptions = new RequestOptions({
        headers: headers,
        search: params
    });

    //any other requestOptions
    requestOptions.method = RequestMethod.Get;
    requestOptions.url = url;
    requestOptions.responseType = ResponseContentType.Blob;

    //create a generic request object with the above requestOptions
    let request = new Request(requestOptions);

    //get the file
    return this.http.request(request)
        .catch(err => {
            /* handle errors */
        });      
}


/* downloads a csv report file generated on the server based on search criteria specified. Save using fileSaver.js. */
downloadSomethingSpecifc(searchCriteria: SearchCriteria): void {

    download(this.url, searchCriteria) 
        .subscribe(
            response => {                                
                let file = response.blob();
                console.log(file.size + " bytes file downloaded. File type: ", file.type);                
                saveAs(file, 'myCSV_Report.csv');
            },
            error => { /* handle errors */}
        );
}

InformationsquelleAutor der Antwort Indev

Hallohier ist ein arbeiten Beispiel. Es ist auch geeignet für PDF!
application/octet-stream - general geben.
Controller:

public FileResult exportExcelTest()
{ 
    var contentType = "application/octet-stream";
    HttpContext.Response.ContentType = contentType;

    RealisationsReportExcell reportExcell = new RealisationsReportExcell();     
    byte[] filedata = reportExcell.RunSample1();

    FileContentResult result = new FileContentResult(filedata, contentType)
    {
        FileDownloadName = "report.xlsx"
    };
    return result;
}

Angular2:

Service-xhr:

import { Injectable } from '@angular/core';
import { BrowserXhr } from '@angular/http';

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {
      super();
  }

  public build(): any {
      let xhr = super.build();
      xhr.responseType = "blob";
      return <any>(xhr);
  }   
}

Installieren-Datei-saver npm-Pakete "Datei-saver": "^1.3.3", "@types/Datei-saver": "0.0.0" und Verkäufers.ts-import, Datei-saver';

Komponente btn download.

import { Component, OnInit, Input } from "@angular/core";
import { Http, ResponseContentType } from '@angular/http';
import { CustomBrowserXhr } from '../services/customBrowserXhr.service';
import * as FileSaver from 'file-saver';

@Component({
    selector: 'download-btn',
    template: '<button type="button" (click)="downloadFile()">Download</button>',
    providers: [
        { provide: CustomBrowserXhr, useClass: CustomBrowserXhr }
    ]
})

export class DownloadComponent {        
    @Input() api: string; 

    constructor(private http: Http) {
    }

    public downloadFile() {
        return this.http.get(this.api, { responseType: ResponseContentType.Blob })
        .subscribe(
            (res: any) =>
            {
                let blob = res.blob();
                let filename = 'report.xlsx';
                FileSaver.saveAs(blob, filename);
            }
        );
    }
}

Mit

<download-btn api="api/realisations/realisationsExcel"></download-btn>

InformationsquelleAutor der Antwort dev-siberia

Bekommen Filesaver arbeiten in den Winkel-5: Installieren

npm install file-saver --save
npm install @types/file-saver --save

In der Komponente verwenden import * as FileSaver from "file-saver";

und verwenden FileSaver.Standard und nicht FileSaver.SaveAs

.subscribe(data => {
            const blob = data.data;
            const filename = "filename.txt";
            FileSaver.default(blob, filename);

InformationsquelleAutor der Antwort Thom Kiesewetter