ng2 pdf viewerダウンロードng2 pdf viewerソースコードダウンロード

ng2 pdf viewer

その他のソースコード

10.3.4

ダウンロード

Angular PDFビューア

Angular 5+のPDFビューアコンポーネント

デモページ

https://vadimdez.github.io/ng2-pdf-viewer/

stackblitzの例

https://stackblitz.com/edit/ng2-pdf-viewer

ブログ投稿

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

概要

インストール
使用法
オプション
ローカルPDFファイルをレンダリングします
ワーカーにカスタムパスを設定します
PDFで検索します
貢献する

インストール

Angular> = 12

 npm install ng2-pdf-viewer

部分的なアイビーが編集したライブラリバンドル。

Angular> = 4

 npm install ng2-pdf-viewer@^7.0.0

角度<4

 npm install ng2-pdf-viewer@~3.0.8

使用法

systemjs使用している場合は、ここで構成を参照してください。

モジュールのimportsにPdfViewerModuleを追加します

 import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { AppComponent } from './app/app.component' ;

import { PdfViewerModule } from 'ng2-pdf-viewer' ;

@ NgModule ( {
  imports : [ BrowserModule , PdfViewerModule ] ,
  declarations : [ AppComponent ] ,
  bootstrap : [ AppComponent ]
} )

class AppModule { }

platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ;

そして、コンポーネントで使用します

 import { Component } from '@angular/core' ;

@ Component ( {
  selector : 'example-app' ,
  template : `
  <pdf-viewer [src]="pdfSrc"
              [render-text]="true"
              [original-size]="false"
              style="width: 400px; height: 500px"
  ></pdf-viewer>
  `
} )
export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf" ;
}

オプション

[SRC]
[（ページ）]
[スティックツーページ]
[外部リンクターゲット]
[レンダーテキスト]
[render-text-mode]
[回転]
[ズーム]
[ズームスケール]
[オリジナルサイズ]
[ページに合う]
[show-all]
[自動化]
[c-maps-url]
[ショー境界線]
（After-LoadComplete）
（ページレンダリング）
（テキストレイヤーレンダリング）
（エラー）
（配置）

[SRC]

財産	タイプ	必須
[SRC]	文字列、オブジェクト、uint8array	必須

PDFの場所を渡します

 [src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"

さらにコントロールするには、オプションを[src]に渡すことができます。ここでは、オブジェクトの他の属性を参照してください。

保護されたPDFをロードするためのオプションオブジェクトは次のとおりです。

 {
 url : 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf' ,
 withCredentials : true
}

[ページ]

財産	タイプ	必須
[ページ]または[（ページ）]	番号	[show-all] = "false"で必須または[show-all] = "true"でオプション

ページ番号

 [page]="1"

双方向のデータバインディングもサポートしています

 [(page)]="pageVariable"

two way data binding実際にページの変更/スクロールでpage変数を更新することを望む場合 - たとえば、コンテナの高さを定義することを確認する必要があります。

 pdf-viewer {
    height : 100 vh ;
}

[スティックツーページ]

財産	タイプ	必須
[スティックツーページ]	ブール	オプション

スティックページのビュー。 [show-all]="true"およびpageと組み合わせて動作します。

 [stick-to-page]="true"

[レンダーテキスト]

財産	タイプ	必須
[レンダーテキスト]	ブール	オプション

テキストレンダリングを有効にして、テキストを選択できます

 [render-text]="true"

[render-text-mode]

財産	タイプ	必須
[render-text-mode]	rendertextMode	オプション

[render-text]="true"と組み合わせて使用

テキストレイヤーが有効になっている場合、および使用される選択モードを制御します。

0 = RenderTextMode.DISABLEDテキスト選択レイヤーを無効にします

1 = RenderTextMode.ENABLEDテキスト選択レイヤーを有効にします

2 = RenderTextMode.ENHANCED強化されたテキスト選択を有効にします

 [render-text-mode]="1"

[外部リンクターゲット]

財産	タイプ	必須
[外部リンクターゲット]	弦	オプション

[render-text]="true"と組み合わせて使用

ターゲットをリンクします

blank
none
self
parent
top

 [external-link-target]="'blank'"

[回転]

財産	タイプ	必須
[回転]	番号	オプション

PDFを回転させます

許可されたステップは90度です。 0、90、180

 [rotation]="90"

[ズーム]

財産	タイプ	必須
[ズーム]	番号	オプション

ズームPDF

 [zoom]="0.5"

[ズームスケール]

財産	タイプ	必須
[ズームスケール]	'page-width' \| 'page-fit' \| 'page-height'	オプション

[original-size]="false"の場合、ズームスケールの計算方法を定義します。

ズームが1の「Page-Width」には、コンテナ内のすべての可能な水平スペースをとるページ幅が表示されます
ズームが1の「Page-Height」は、コンテナ内のすべての可能な垂直スペースをとるページの高さを表示します
ズームが1の「ページフィット」は、コンテナに完全に収まるように幅または高さのいずれかにスケーリングされるページを表示します

 [zoom-scale]="'page-width'"

[オリジナルサイズ]

財産	タイプ	必須
[オリジナルサイズ]	ブール	オプション

trueに設定されている場合 - サイズは元のドキュメントと同じです
falseに設定する場合 - サイズはコンテナブロックと同じです

 [original-size]="true"

[ページに合う]

財産	タイプ	必須
[ページに合う]	ブール	オプション

[original-size]="true"と組み合わせて機能します。ドキュメントを元のサイズで表示し、コンテナブロックよりも大きくないことを確認できます。

 [fit-to-page]="false"

[show-all]

財産	タイプ	必須
[show-all]	ブール	オプション

シングルまたはすべてのページを完全に表示します

 [show-all]="true"

[自動化]

財産	タイプ	必須
[自動化]	ブール	オプション

オートサイズをオンまたはオフにします。

！ [autoresize]を機能させることが重要です - [original-size]="false"およびpdf-viewerタグにmax-widthまたはdisplay設定されていることを確認してください。

 [autoresize]="true"

[c-maps-url]

財産	タイプ	必須
[c-maps-url]	弦	オプション

非ラチン文字のURLソースマップ。

 [c-maps-url]="'assets/cmaps/'"

デフォルトのURLはhttps：//unpkg.com/[email protected]/cmaps/

CMAPを独自に提供するにはnode_modules/pdfjs-dist/cmaps assets/cmapsにコピーする必要があります。

[ショー境界線]

財産	タイプ	必須
[ショー境界線]	ブール	オプション

ページの境界線を表示します

 [show-borders]="true"

（After-LoadComplete）

財産	タイプ	必須
（After-LoadComplete）	折り返し電話	オプション

コールバックでPDF情報を取得します

最初にコントローラーでコールバック関数「callbackfn」を定義し、

 callBackFn ( pdf : PDFDocumentProxy ) {
   // do anything with "pdf"
}

次に、テンプレートで使用します。

 (after-load-complete)="callBackFn($event)"

（ページレンダリング）

財産	タイプ	必須
（ページレンダリング）	折り返し電話	オプション

ページがレンダリングされたらイベントを取得します。レンダリングされたすべてのページに対して呼び出されました。

コンポーネントでコールバックを定義します。

 pageRendered ( e : CustomEvent ) {
  console . log ( '(page-rendered)' , e ) ;
}

そして、それを<pdf-viewer>にバインドします：

 (page-rendered)="pageRendered($event)"

（ページが開催された）

財産	タイプ	必須
（ページが開催された）	折り返し電話	オプション

ページが初期化されたらイベントを取得します。

コンポーネントでコールバックを定義します。

 pageInitialized ( e : CustomEvent ) {
  console . log ( '(pages-initialized)' , e ) ;
}

そして、それを<pdf-viewer>にバインドします：

 (pages-initialized)="pageInitialized($event)"

（テキストレイヤーレンダリング）

財産	タイプ	必須
（テキストレイヤーレンダリング）	折り返し電話	オプション

テキストレイヤーがレンダリングされたらイベントを取得します。

コンポーネントでコールバックを定義します。

 textLayerRendered ( e : CustomEvent ) {
  console . log ( '(text-layer-rendered)' , e ) ;
}

そして、それを<pdf-viewer>にバインドします：

 (text-layer-rendered)="textLayerRendered($event)"

（エラー）

財産	タイプ	必須
（エラー）	折り返し電話	オプション

コールバックのエラーが発生します

コンポーネントのクラスでコールバックを定義します

 onError ( error : any ) {
  // do anything
}

次に、コンポーネントのテンプレートのpdf-componentに追加します

(error)="onError($event)"

（配置）

財産	タイプ	必須
（配置）	折り返し電話	オプション

読み込み進行状況コールバック - 進行状況情報のtotalとloadedバイトを提供します。 PDF荷重段階で何度か呼ばれます。

コンポーネントのクラスでコールバックを定義します

 onProgress ( progressData : PDFProgressData ) {
  // do anything with progress data. For example progress indicator
}

次に、コンポーネントのテンプレートのpdf-componentに追加します

(on-progress)="onProgress($event)"

ローカルPDFファイルをレンダリングします

htmlテンプレートにinputを追加します。

 < input (change) =" onFileSelected() " type =" file " id =" file " >

次に、コンポーネントにonFileSelectedメソッドを追加します。

 onFileSelected ( ) {
  let $img : any = document . querySelector ( '#file' ) ;

  if ( typeof ( FileReader ) !== 'undefined' ) {
    let reader = new FileReader ( ) ;

    reader . onload = ( e : any ) => {
      this . pdfSrc = e . target . result ;
    } ;

    reader . readAsArrayBuffer ( $img . files [ 0 ] ) ;
  }
}

ワーカーにカスタムパスを設定します

デフォルトでは、 workerはcdn.jsdelivr.netからロードされます。

あなたのコードでは、ワーカーへのpath /pdf.worker.mjs

 ( window as any ) . pdfWorkerSrc = '/pdf.worker.mjs' ;

これは、 pdf-viewerコンポーネントがレンダリングされる前に設定する必要があります。

複数のコンポーネントが同じWebページ内に何らかの形でロードされ、同じウィンドウを共有するが、PDF.Workerの異なるバージョンを使用して、サポートが追加された（非常に希少な）エッジケースがある場合は、サポートが追加されました。必要なPDFJの特定のバージョンを追加して、そのバージョンのためだけにカスタムパスをオーバーライドすることを除いて、上記を実行できます。この方法で、グローバルウィンドウvarの設定は競合しません。

 ( window as any ) [ "pdfWorkerSrc2.14.305" ] = '/pdf.worker.mjs' ;

PDFで検索します

検索機能にはeventBus使用します。

コンポーネントのTSファイルで：

pdf-viewerコンポーネントへの参照を追加します。
次に、必要に応じて、このようにsearch()を実行します。

@ ViewChild ( PdfViewerComponent ) private pdfComponent: PdfViewerComponent ;

search ( stringToSearch : string ) {
  this . pdfComponent . eventBus . dispatch ( 'find' , {
    query : stringToSearch , type : 'again' , caseSensitive : false , findPrevious : undefined , highlightAll : true , phraseSearch : true
  } ) ;
}

貢献する

Convributing.mdを参照してください

寄付

このプロジェクトが開発までの時間を短縮するのに役立つなら、あなたは私に一杯のお茶を与えることができます:)

ライセンス

拡大する

追加情報

バージョン 10.3.4
タイプその他のソースコード
更新時間 2025-01-30
サイズ 667.65KB
から Github