it-swarm.com.de

Winkel 2, wie die .pdf-Datei angezeigt wird

Ich habe eine angle2-App, bei der der Benutzer eine PDF-Datei herunterladen und im Browser öffnen kann.

Gibt es ein angle2-Modul oder eine Komponente, die ich verwenden kann?

16
Ricky

Haben Sie sich dieses Modul angesehen https://www.npmjs.com/package/ng2-pdf-viewer ?

denken Sie daran, es so im Modul zu deklarieren

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

ng2-pdf-viewer funktioniert ganz gut, aber ich wollte die PDF-Anzeige wie auf dieser Seite: https://pdfobject.com/static.html

Leider hatte ich einen PDF-Stream und kein direktes PDF (kein .pdf am Ende des Links) wie: https: //************.idshost.fr/ws/** ****** xfer/ws/download/3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

die Antwort war wie folgt (nur ein Teil eingefügt):

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

mit solchen Überschriften

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

ich habe gehört, dass der Browser versucht, den Inhalt zu öffnen, anstatt ihn herunterzuladen. Ich habe keinen Zugriff auf den Server und habe es nicht versucht.

Mein PDF wurde nicht angezeigt, es wurde keine leere Ansicht angezeigt oder der Fehler "Fehler beim Laden des PDF-Dokuments". (aber es funktionierte auf einigen seltenen PDFs mit <object> und <embed>, aber nicht mit <iframe> aus unbekanntem Grund)

finnaly hat es geschafft, etwas zu finden, das funktioniert, vielleicht hilft es einigen Leuten, hier ist der Code (angle2):

.ts Datei


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

        //somewhere...
        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
                }
            );

        }

.html-Datei (jede von ihnen funktioniert, iframe hat mehr Funktionen für mich, wie Drucken)

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

Hoffe es hilft jemandem!

20
Ambroise Rabier

versuche dies. Bitte ändern Sie den filename.pdf mit Ihrem tatsächlichen Pfad und Dateinamen

 <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

Try ng2-pdfjs-viewer ( https://www.npmjs.com/package/ ng2-pdfjs-viewer ). Meiner Meinung nach erwies es sich als das einfachste und zuverlässigste, das bisher verwendet wurde - beim Erstellen einer PDF-intensiven Anwendung. Sie erhalten einen vollständigen Bildbetrachter und viele zusätzliche Funktionen - Druckvorschau, automatisches Herunterladen, Öffnen in neuem Tab, Zoomen, Scrollen, Wechseln zu Seite/benanntem Ziel, Drehen von Dokumenten usw. Es funktioniert mit PDF-Streams und physischen PDF-Dateien gleichermaßen. Wenn Sie PDF über den Webbrowser auf Angular bereitstellen möchten; Dieses Paket ist eine große Hilfe.

enter image description here

  1. Es installieren
    $ npm install ng2-pdfjs-viewer --save

  2. Zum App-Modul hinzufügen

import { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; // <-- Import PdfJsViewerModule module

@NgModule({
  imports: [
    PdfJsViewerModule // <-- Add to declarations
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Benutze es.
    <ng2-pdfjs-viewer pdfSrc="mydoc.pdf"></ng2-pdfjs-viewer>
1
James

Wenn Sie PDF Viewer mit einer klassischen Symbolleiste haben möchten, verwenden Sie ngx-extended-pdf-viewer . Es verfügt über alle erforderlichen Optionen wie Drucken, Herunterladen, Seitennavigation usw.

So verwenden Sie die Bibliothek: 

  1. Installieren Sie die Bibliothek mit npm i ngx-extended-pdf-viewer --save
  2. Fügen Sie Ihrem angular.json folgende Skripte hinzu

    "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. Fügen Sie "NgxExtendedPdfViewerModule" zum Importabschnitt Ihrer Moduldatei hinzu

  4. Zeigen Sie es in Ihrer Komponente folgendermaßen an: 

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

1
Dertsaf

Versuche dies: 

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

Das Embed-Tag kann an beliebiger Stelle in Ihrer Vorlage platziert werden. Ändern Sie die Formatvorlagen attrs und src nach Bedarf.

0
Denison Cupidon

Für mich geht das. Mein Fehler war, responseType:ResponseContentType.ArrayBuffer in die Kopfzeilen zu schreiben und es ist nicht darin:

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

Wenn Sie ein Basis-64-PDF anzeigen möchten, können Sie meine Komponente verwenden https://www.npmjs.com/package/ng2-image-viewer

Es funktioniert mit angle 2+ und stellt Base 64-Bilder, URL-Bilder und Base 64-PDFs dar. Es ist einfach zu implementieren. Sie müssen nur:

1) Führen Sie npm install ng2-image-viewer --save aus.

2) Fügen Sie diese Codes in Ihre Datei angle-cli.json ein:

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

3) Importieren Sie ImageViewerModule

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

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

4) Jetzt können Sie es nach Belieben verwenden:

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

Hier ist eine Demo davon Ng2-Image-Viewer Showcase

Für weitere Informationen können Sie den Link oben überprüfen :)

0
Breno Prata