AngularのPDF表示ライブラリの調査結果

6189 ワード
Angular pdfjs Angular テキストリンク

PDFを表示する機能の調査概要を記載します。
時間があれば、gitのレポジトリ作成してさらしますが、メモがわりとお考えください。

要件

  1. 柔軟にUIの付け替えが可能
  2. 同一ページ内部で複数のPDFが表示できる
  3. pdfの文字内検索ができる
  4. 指定したページに遷移または、移動することができる

考慮にいれたライブラリ

  1. ng2-pdf-viewer npm / git
  2. ng2-pdfjs-viewer npm / git
  3. ngx-extended-pdf-viewer npm / git

GitHub / npm trendsから

考察

ng2-pdf-viewerは安定して、利用率.Contribute数は高い。
ngx-extended-pdf-viewerについては直近数値を伸ばしており、多機能。

Table

library used by Contributes
ng2-pdf-viewer 3.9k 24
ng2-pdfjs-viewer 209 4
ngx-extended-pdf-viewer 449 14

2020/12/16現在

比較表

npm trendsより引用

機能比較

必要機能の確認

  1. 柔軟にUIの付け替えが可能
  2. 同一ページ内部で複数のPDFが表示できる
  3. pdfの文字内検索ができる
  4. 指定したページに遷移または、移動することができる

必要機能の正誤表

library UIの付け替えが可能 複数のPDFが表示できる pdfの文字内部検索ができる 指定したページに遷移または、移動することができる
ng2-pdf-viewer △*1 ○ ○ △*2
ng2-pdfjs-viewer × × ○ ○
ngx-extended-pdf-viewer △*3 △*4 ○ ○ 
*1 : thumbnailについては、本体の全てのページがレンダリングした時でないと全てのPDFは表示されない
*2 : 機能の提供はされておらず、自力で実装する必要がある
*3 : 機能の提供はあるが、一瞬表示されるバグが存在しているためあまりUXがよいとは言えなかった
*4 : 同一のページ内部で表示することができず、1つのページに一つのPDFしか表示することができない

基本機能

ng-pdf-viewer

ページ情報の取得
  • current pageの取得
  • total pageの取得
その他機能
  • 回転
  • 拡大/縮小
  • PDFのサイズ調整
Rending Condtion
  • テキストとしてレンダリング
  • rendering conditionの取得
検索
  • 検索
  • 検索のヒット数取得
  • 検索該当のハイライト

ng-pdfjs-viewer

ページ情報の取得
  • current pageの取得
  • total pageの取得
その他機能
  • 回転
  • 拡大/縮小
  • PDFのサイズ調整
  • ダウンロード
  • 指定ページへのスクロール
  • ブックマーク
Rending Condtion
  • テキストとしてレンダリング
  • rendering conditionの取得
検索
  • 検索
  • 検索のヒット数取得
  • 検索該当のハイライト

ngx-extended-pdf-viewer

ページ情報の取得
  • current pageの取得
  • total pageの取得
その他機能
  • 回転
  • 拡大/縮小
  • PDFのサイズ調整
  • ダウンロード
  • 指定ページへのスクロール
  • ブックマーク
  • 認証機能
  • メニューのカスタマイズ
  • 言語指定
  • パスワード解除
  • PDF情報の表示
Rending Condtion
  • テキストとしてレンダリング
  • rendering conditionの取得
検索
  • 検索
  • 検索のヒット数取得
  • 検索該当のハイライト