ng2 - Angular 2 como mostrar archivo.pdf

pdf viewer angular 4

Question

Tengo una aplicación angular2, donde quiero que el usuario pueda descargar y abrir un archivo pdf en el navegador.

¿Hay algún módulo o componente angular2 que pueda usar?

Answer 1

¿Ha echado un vistazo a este módulo https://www.npmjs.com/package/ng2-pdf-viewer ?

Recuerda declararlo en el módulo como tal.

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

Answer 2

Esto funciona para mi. Mi error fue poner responseType:ResponseContentType.ArrayBuffer en los encabezados y no está dentro de él:

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

Answer 3

Prueba esto:

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

La etiqueta Incrustar puede colocarse en cualquier lugar de su plantilla. Cambie el estilo attrs y src según sea necesario.

Answer 4

Si desea mostrar un pdf base 64, puede usar mi componente https://www.npmjs.com/package/ng2-image-viewer

Funciona con angular 2+ y presenta imágenes de Base 64, imágenes de URL y archivos PDF de Base 64, es fácil de implementar, solo tiene que:

1) Ejecute npm install ng2-image-viewer --save

2) Agregue estos códigos en su archivo angular-cli.json:

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

3) Importar ImageViewerModule

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

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

4) Ahora puedes usarlo como desees:

<!-- 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>

Aquí hay una demostración de ello. Ng2-Image-Viewer Showcase

Para más información puedes consultar el enlace de arriba :)

Answer 5

Si desea un visor de PDF con una barra de herramientas con clase, use ngx-extended-pdf-viewer . Tiene todas las opciones necesarias, como imprimir, descargar, navegar por la página, etc.

Cómo utilizar la biblioteca:

1. Instale la biblioteca con npm i ngx-extended-pdf-viewer --save

2. Agregue los siguientes scripts a su 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. Agregue "NgxExtendedPdfViewerModule" a la sección de importación de su archivo de módulo

4. Muéstralo en tu componente así:

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

Answer 6

ng2-pdf-viewer funciona bastante bien, pero quería que se mostrara el pdf como en esta página: https://pdfobject.com/static.html

Lamentablemente, tuve un flujo de pdf, y no un pdf directo (no .pdf al final del enlace) como: https: //***********.idshost.fr/ws/** ****** xfer / ws / download / 3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

La respuesta fue así (solo pegó una parte):

% PDF-1.3% Äåòåë§ó ÐÄÆ 4 0 obj << / Longitud 5 0 R / Filter / FlateDecode >> stream xTÍÛ6¼û) æØE [²ì89 $ i½ = ° × Ë @ "µ" e} ôÉKõY: ¬,] §k © ùfæwø;, ÷ ^ @ yÄQ²é> Ù £ ÿ¼â £ 1 l ¶Ñj-âTßâ1üJ,> à æ {Ü © ¦Ô6 @ ¢

pizarrones de esa manera

HTTP/1.1 200 OK
Date: Fri, 05 May 2017 11:00:32 GMT
Server: Apache-Coyote/1.1
Content-Disposition: attachment; filename="1/B_FILENAME*****.pdf"
Content-Type: application/pdf
Content-Length: 34723
Keep-Alive: timeout=5, max=96
Connection: Keep-Alive

Escuché que cambiar la disposición del contenido a en línea en lugar de adjuntar hace que el navegador intente abrirlo en lugar de descargarlo, no tengo acceso al servidor, así que no lo intenté.

Mi pdf no se mostraba, obteniendo una vista en blanco o error "no se pudo cargar el documento pdf". (pero funcionó en algunos pdf raros con <object> y <embed>, pero no con <iframe> por razones desconocidas)

Finnalmente logró encontrar algo que funciona, tal vez ayude a algunas personas, aquí está el código (angular2):

archivo .ts

import {DomSanitizer,SafeResourceUrl} from ''@angular/platform-browser''
import {Headers} from "@angular/http/src/headers";
import {ResponseContentType} from "@angular/http/index";

    //somewhere is the code
    this.getConsultationDocumentPDF(this.inputDataFile.hash).subscribe(
                    (data:any) => { // data type is Response, but since _body is private field i changed it to any

                        var file3 = new Blob([data._body], {type: ''application/pdf''});
                        this.dataLocalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file3));


                    },
                    error => {
                        console.log(error);
                    }
                );

    public getConsultationDocumentPDF (pHash:string):Observable<Response> {
        return this.http.get(
            "https://***********.idshost.fr/ws/********xfer/ws/download/"+pHash,
            {
                headers: new Headers({
                    "Access-Control-Allow-Origin": "*",
                    "Authorization": "Bearer "
                }),
                responseType:ResponseContentType.ArrayBuffer // YOU NEED THAT
            }
        );

    }

Archivo .html (cualquiera de ellos funciona, iframe tiene más funcionalidad para mí, como imprimir)

<div *ngIf="dataLocalUrl != undefined">
    <h5>iframe whit local url</h5>
    <iframe width="500" height="600" [attr.src]="dataLocalUrl" type="application/pdf"></iframe>
    <h5>object whit local url</h5>
    <object [attr.data]="dataLocalUrl" type="application/pdf" width="100%" height="100%"></object>
    <h5>embed whit local url</h5>
    <embed [attr.src]="dataLocalUrl" type="application/pdf" width="100%" height="100%">
</div>

Espero que ayude a alguien!

Answer 7

prueba esto. Cambie el filename.pdf con su ruta y nombre de archivo reales

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