it-swarm.com.de

Angular2 Anzeige PDF

Ich habe ein Angle2-Projekt mit einer ASP.Net-Web-API. Ich habe Code, um einen Dateipfad aus meiner Datenbank abzurufen, der zu einem Dokument auf meinem Server führt. Ich möchte dieses Dokument dann auf einer neuen Registerkarte im Browser anzeigen. Hat jemand Vorschläge, wie das geht?

Gerne rufe ich die Datei entweder in Angular2 (TypeScript) oder in meiner API ab und streame sie ab.

Dies ist mein Versuch, es in meiner API abzurufen, aber ich kann nicht herausfinden, wie ich es in Angular2 erhalten und richtig anzeigen kann:

public HttpResponseMessage GetSOP(string partnum, string description)
    {
        var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path;
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(sopPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

Jede Hilfe wäre sehr dankbar.

Danke vielmals!!!

18
DaRoGa

Zunächst müssen Sie Optionen für Ihre http-Anforderung festlegen - setzen Sie responseType auf ResponseContentType.Blob, verwenden Sie blob(), um die Antwort als blob zu lesen, und setzen Sie ihren Typ auf application/pdf:

downloadPDF(): any {
    return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
    (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

Um die Datei abzurufen, müssen Sie subscribe hinzufügen, und Sie können eine neue ObjectURL erstellen und window.open() verwenden, um PDF in einem neuen Tab zu öffnen:

this.myService.downloadPDF().subscribe(
        (res) => {
        var fileURL = URL.createObjectURL(res);
        window.open(fileURL);
        }
    );
34
Stefan Svrkota

Angular v.5.2.1 answer:

In *.services.ts

downloadPDF(): any {
    return this._httpClient.get(url, { responseType: 'blob'})
            .map(res => {
            return new Blob([res], { type: 'application/pdf', });
        });
  }

Und dann in *.component.ts

downloadPDF() {
    let tab = window.open();
    this._getPdfService
      .downloadPDF()
      .subscribe(data => {
        const fileUrl = URL.createObjectURL(data);
        tab.location.href = fileUrl;
      });
  }

Es ist wichtig, einen neuen Tab einzuleiten und zu öffnen bevor den Service aufzurufen. Stellen Sie dann die URL dieser Registerkarte auf die Datei-URL ein.

14
jonas

ANGULAR 5

Ich hatte das gleiche Problem, das ich einige Tage verloren habe.

Hier kann meine Antwort anderen helfen, was beim Rendern von PDFs geholfen hat. 

Für mich, obwohl ich als responseType erwähne: 'arraybuffer', konnte er es nicht nehmen. 

Dafür müssen Sie als responseType angeben: 'arraybuffer' als 'json'. ( Reference )

Arbeitscode

service.ts

downloadPDF(): any {
return this._httpClient.get(url, { responseType: 'blob' as 'json' })
        .map(res => {
        return new Blob([res], { type: 'application/pdf', });
    });

}

component.ts

this.myService.downloadPDF().subscribe(
    (res) => {
    var fileURL = URL.createObjectURL(res);
    window.open(fileURL);
    }
);

Bezogen auf den untenstehenden Link

https://github.com/angular/angular/issues/18586

4
MPPNBD

Angular 2+ Beispiel PDF-Viewer 

Page.html

<div class="container">
<div>
    <label>PDF src</label>
    <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
</div>
<div>
    <label>Page:</label>
    <input type="number" placeholder="Page" [(ngModel)]="page">
</div>
<div class="row">
    <div class="col-md-5">
        <div class="thumbnail" style="width: 150px;height: 200px;" (click)="pdfShow=!pdfShow">
            <p>click me to view PDF in Iframe!</p>
            <pdf-viewer [src]="pdfSrc"
                        [page]="page"
                        [original-size]="false"
                        style="display: block;"
             ></pdf-viewer>
        </div>
        <br>
    </div>
    <div class="col-md-7">
        <div *ngIf="!pdfShow">
            <h4>PDF in Iframe</h4>
            <iframe width="500" height="600" [src]="pageurl" type="application/pdf"></iframe>
        </div>
    </div>
</div>
<br><br>
<h2> PDF in Object Tag</h2>
<object width="500" height="600"  data="https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf" type="application/pdf"></object>

page.ts

import { Component } from '@angular/core';
import { BrowserModule, DomSanitizer, SafeResourceUrl } from '@angular/platform- 
browser'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
 })
 export class AppComponent {

  pdfSrc = 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf';
  page: number = 1;
  pageurl: SafeResourceUrl;

  constructor(private domSanitizer: DomSanitizer) {
     }
      ngOnInit() {
      this.pageurl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
     }
     title = 'Mohsen';
     }

app.module.ts

hinzufügen

import { FormsModule } from '@angular/forms'; 
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import { HttpModule } from '@angular/http';.
import {HttpClientModule} from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

importiere das 

imports: [
    BrowserModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
],