web-dev-qa-db-fra.com

Angular 2 comment afficher le fichier .pdf

J'ai une application angular2, où je veux que l'utilisateur puisse télécharger et ouvrir un fichier pdf dans le navigateur.

Existe-t-il un module ou un composant angular2 que je peux utiliser?

angularpdfweb-frontend
16
Ricky

Avez-vous consulté ce module https://www.npmjs.com/package/ng2-pdf-viewer ?

rappelez-vous de le déclarer dans le module comme si

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http';

import { PdfViewerComponent } from 'ng2-pdf-viewer'; 
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    PdfViewerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
14
Benji Lees

essaye ça. S'il vous plaît changer le filename.pdf avec votre chemin actuel et le nom du fichier

 <object data="filename.pdf" width="100%" height="100%" type='application/pdf'>
   <p>Sorry, the PDF couldn't be displayed :(</p>
   <a href="filename.pdf" target="_blank">Click Here</a>
 </object>
1
Devidas Kadam

Si vous voulez que le visualiseur PDF soit doté d'une barre d'outils élégante, utilisez/ ngx-extended-pdf-viewer ..__ Il contient toutes les options nécessaires, telles que l'impression, le téléchargement, la navigation entre les pages, etc.

Comment utiliser la bibliothèque: 

  1. Installez la bibliothèque avec npm i ngx-extended-pdf-viewer --save

  2. Ajoutez les scripts suivants à votre angular.json

    "scripts": [ "node_modules/ngx-extended-pdf-viewer/assets/pdf.js", "node_modules/ngx-extended-pdf-viewer/assets/pdf.worker.js", "node_modules/ngx-extended-pdf-viewer/assets/viewer.js" ]

  3. Ajoutez "NgxExtendedPdfViewerModule" à la section d'importation de votre fichier de module

  4. Affichez-le dans votre composant comme ceci: 

<ngx-extended-pdf-viewer src="'assets/example.pdf'" useBrowserLocale="false"> </ngx-extended-pdf-viewer>

1
Dertsaf

Essaye ça: 

<embed src="/assets/pdf/pr.pdf" 
    style="width: 100%;height: 500px" 
    type="application/pdf">

La balise incorporée peut être placée n’importe où dans votre modèle. Modifiez le style attrs et src au besoin.

0
Denison Cupidon

Ça marche pour moi. Mon erreur a été de mettre responseType:ResponseContentType.ArrayBuffer dans les en-têtes et ce n’est pas à l’intérieur:

{
     headers: new Headers({
        "Access-Control-Allow-Origin": "*",
        "Authorization": "Bearer "
     }),
     responseType:ResponseContentType.ArrayBuffer // YOU NEED THIS LINE
}
0
user8081223

Si vous souhaitez afficher un fichier PDF en base 64, vous pouvez utiliser mon composant https://www.npmjs.com/package/ng2-image-viewer

Il fonctionne avec angular 2+ et rend les images en base 64, les images URL et les PDF en base 64, il est facile à mettre en œuvre, il vous suffit de:

1) Exécuter npm install ng2-image-viewer --save

2) Ajoutez ces codes sur votre fichier angular-cli.json:

"styles": [
     "../node_modules/ng2-image-viewer/imageviewer.scss"
],
"scripts": [
     "../node_modules/ng2-image-viewer/imageviewer.js"
],

3) Importer ImageViewerModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4) Vous pouvez maintenant l'utiliser comme vous le souhaitez:

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

En voici une démonstration Ng2-Image-Viewer Showcase

Pour plus d'informations, vous pouvez vérifier le lien ci-dessus :)

0
Breno Prata