Angular2 Anzeigen PDF

Ich habe eine angular2 Projekt mit ein ASP.Net Web-API. Ich habe code, um eine Datei Pfad aus meiner Datenbank, das geht auf ein Dokument auf meinem server. Dann möchte ich zur Anzeige dieses Dokuments im browser in einem neuen tab. Hat jemand irgendwelche Vorschläge, wie dies zu tun?

Ich bin glücklich, um die Datei abzurufen, entweder Angular2 (Typoskript), oder in meiner API und streamen Sie Sie nach unten.

Dies ist mein Versuch, das abrufen in meinem API, aber ich kann nicht herausfinden, wie es in der Angular2 und richtig angezeigt:

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;
    }

Jegliche Hilfe würde sehr geschätzt werden.

Vielen Dank!!!

InformationsquelleAutor der Frage DaRoGa | 2016-10-28

30

Zunächst, müssen Sie Optionen für Ihre http - Anforderung- set responseType zu ResponseContentType.Blob verwenden blob() Lesen Antwort als blob und stellen Sie seinen Typ auf application/pdf:
```
downloadPDF(): any {
    return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
    (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}
```
Dann, um die Datei zu erhalten, müssen Sie subscribe zu es und Sie können neue ObjectURL und verwenden window.open() für das öffnen von PDF im neuen tab:
```
this.myService.downloadPDF().subscribe(
        (res) => {
        var fileURL = URL.createObjectURL(res);
        window.open(fileURL);
        }
    );
```
InformationsquelleAutor der Antwort Stefan Svrkota

Winkel-v. 5.2.1 Antwort:

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

Ist es wichtig, zu initiieren, und öffnen Sie eine neue Registerkarte vor der Dienst aufgerufen wird. Dann setzen Sie diese Tabletten url der fileurl.

InformationsquelleAutor der Antwort jonas

2

WINKEL 5

Ich hatte das gleiche problem, das ich verloren habe wenige Tage an.

Hier meine Antwort vielleicht anderen helfen, die geholfen, Rendern von pdf.

Für mich, obwohl, wenn ich erwähne, wie responseType : "arraybuffer", es war nicht in der Lage, es zu nehmen.

Für Sie, dass Sie brauchen, um zu erwähnen, wie responseType : 'arraybuffer' als 'json'.(Referenz)

Funktionierenden code

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

Komponente.ts
```
this.myService.downloadPDF().subscribe(
    (res) => {
    var fileURL = URL.createObjectURL(res);
    window.open(fileURL);
    }
);
```
Bezeichnet aus dem folgenden link

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

InformationsquelleAutor der Antwort MPPNBD

Angular 2+ B. 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>

Seite.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.- Modul.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';

importieren Sie die

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

InformationsquelleAutor der Antwort Abdul-Mohsen Al-Enazi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.