web-dev-qa-db-fra.com

Affichage angulaire2 PDF

J'ai un projet angular2 avec une API Web ASP.Net. J'ai le code pour récupérer un chemin de fichier de ma base de données qui mène à un document sur mon serveur. Je souhaite ensuite afficher ce document dans le navigateur dans un nouvel onglet. Quelqu'un a-t-il des suggestions sur la manière de procéder?

Je suis heureux de récupérer le fichier dans Angular2 (TypeScript) ou dans mon API et de le diffuser.

Ceci est ma tentative de le récupérer dans mon API mais je ne peux pas comprendre comment le recevoir dans Angular2 et l'afficher correctement:

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

Toute aide serait grandement appréciée.

Merci beaucoup!!!

pdfangularasp.net-web-apifilestream
18
DaRoGa

Tout d’abord, vous devez définir les options de votre demande http - définissez responseType sur ResponseContentType.Blob, utilisez blob() pour lire la réponse sous la forme blob et définissez son type sur application/pdf:

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

Ensuite, pour obtenir le fichier, vous devez y ajouter subscribe. Vous pouvez créer un nouveau ObjectURL et utiliser window.open() pour ouvrir PDF dans un nouvel onglet:

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

ANGULAIRE 5

J'ai eu le même problème que j'ai perdu quelques jours à ce sujet.

Ici, ma réponse peut aider les autres, ce qui a aidé à rendre le pdf. 

Pour moi, même si je mentionne en tant que responseType: 'arraybuffer', il n’a pas pu le prendre. 

Pour cela, vous devez mentionner en tant que responseType: 'arraybuffer' en tant que 'json'. ( Reference )

Code de travail

service.ts

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

}

composant.ts

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

Référé du lien ci-dessous

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

4
MPPNBD

Exemple de visionneuse PDF angulaire 2+ 

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

ajouter

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

importer le 

imports: [
    BrowserModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
],
0
Abdul-Mohsen Al-Enazi