PDFを表示する機能の調査概要を記載します。
時間があれば、gitのレポジトリ作成してさらしますが、メモがわりとお考えください。
要件
- 柔軟にUIの付け替えが可能
- 同一ページ内部で複数のPDFが表示できる
- pdfの文字内検索ができる
- 指定したページに遷移または、移動することができる
考慮にいれたライブラリ
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より引用
機能比較
必要機能の確認
- 柔軟にUIの付け替えが可能
- 同一ページ内部で複数のPDFが表示できる
- pdfの文字内検索ができる
- 指定したページに遷移または、移動することができる
必要機能の正誤表
| 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の取得
検索
- 検索
- 検索のヒット数取得
- 検索該当のハイライト