web-dev-qa-db-ja.com

Angular 2 .pdfファイルの表示方法

ユーザーがブラウザーでpdfファイルをダウンロードして開くことができるようにしたい、angular2アプリがあります。

使用できるangle2モジュールまたはコンポーネントはありますか？

angularpdf
20
Ricky

このモジュールをご覧になりましたか https://www.npmjs.com/package/ng2-pdf-viewer ？

そのようにモジュールで宣言することを忘れないでください

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 { }
19
Benji Lees

ng2-pdf-viewerは非常に良好に動作しますが、このページのようなPDF表示が必要でした： https://pdfobject.com/static.html

悲しいことに、私はpdfストリームを持っていて、https：//***********.idshost.fr/ws/**のような直接のpdf（リンクの最後に.pdfはありません）はありませんでした****** xfer/ws/download/3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

応答はそのようなものでした（一部のみを貼り付けました）：

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

そのような聖霊降臨祭のヘッダー

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

content-dispositionを添付ではなくインラインに変更すると、ブラウザがダウンロードする代わりにそれを開こうとすることを聞きました。サーバーにアクセスできないため、試しませんでした。

PDFが表示されず、空白のビューが表示されるか、「pdfドキュメントの読み込みに失敗しました」というエラーが表示されます。 （ただし、<object>および<embed>のまれなPDFで機能しましたが、不明な理由で<iframe>では機能しませんでした）

うまくいくものを見つけることができました。多分それは一部の人々を助けるでしょう、ここにコード（angular2）があります：

.tsファイル


    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ファイル（いずれも機能します。iframeはprintのように、より機能的です）

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

それが誰かを助けることを願っています！

20
Ambroise Rabier

これを試して：

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

Embedタグは、テンプレートのどこにでも配置できます。必要に応じて、スタイルattrsおよびsrcを変更します。

2
Denison Cupidon

PDFビューアーに上品なツールバーが必要な場合は、 ngx-extended-pdf-viewer を使用します。印刷、ダウンロード、ページナビゲーションなど、必要なすべてのオプションがあります。

ライブラリの使用方法：

  1. Npm i ngx-extended-pdf-viewer --saveを使用してライブラリをインストールします

  2. 次のスクリプトを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. モジュールファイルのインポートセクションに「NgxExtendedPdfViewerModule」を追加します

  4. 次のようにコンポーネントに表示します。

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

2
Dertsaf

これを試して。 filename.pdfを実際のパスとファイル名で変更してください

 <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

試すng2-pdfjs-viewer（ https://www.npmjs.com/package/ng2-pdfjs-viewer ）。私見、それはこれまでに使用するのが最も簡単で最も信頼できることを証明しました-PDF集中アプリケーションを構築している間。フルフィギュアビューアと多くの追加機能を利用できます-印刷プレビュー、自動ダウンロード、新しいタブで開く、ズーム、スクロール、ページ/名前の付いた宛先に移動、ドキュメントの回転など。PDFストリームと物理pdfファイルで同様に機能します。 AngularでWebブラウザを介してpdfを提供する場合は、このパッケージは非常に役立ちます。

enter image description here

  1. インストールする
    $ npm install ng2-pdfjs-viewer --save

  2. アプリモジュールに追加

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

@NgModule({
  imports: [
    PdfJsViewerModule // <-- Add to declarations
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. これを使って。
    <ng2-pdfjs-viewer pdfSrc="mydoc.pdf"></ng2-pdfjs-viewer>
1
James

わたしにはできる。私のエラーは、ヘッダーにresponseType:ResponseContentType.ArrayBufferを挿入することでした。

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

Base 64 PDFを表示したい場合は、私のコンポーネントを使用できます https://www.npmjs.com/package/ng2-image-viewer

angular 2+で動作し、Base 64画像、URL画像、Base 64 PDFをレンダリングします。簡単に実装できます。

1）npm install ng2-image-viewer --saveを実行します

2）angular-cli.jsonファイルに次のコードを追加します。

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

3）ImageViewerModuleのインポート

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

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

4）必要に応じて使用できます：

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

以下にデモを示します Ng2-Image-Viewer Showcase

詳細については、上記のリンクを確認してください:)

0
Breno Prata