pdf.jsの使用

iframe
プラグインを使用しない場合、PDF、PPT、Wordファイルをオンラインでプレビューする場合、iframeタグを直接使用してネストできることが多く、提供するツールもかなり豊富(上下ページ切り替え、全画面切り替え、ダウンロード、指定ページ数へのジャンプなど)で、全画面モードでは表示される内容がコピーできないことに注意が必要です.表示される最大の高さは、現在のドキュメントの内容の高さと同じです(ドキュメントの内容の高さが現在のウィンドウの高さより小さい場合、余分な部分は黒い背景で残りの空間を埋め尽くします).
利点:操作が簡単で、1つのラベルで表示される問題を解決できます.
欠点:低バージョンのブラウザではリーダープラグインをダウンロードする必要があり、異なるブラウザの下でドキュメントの表示形式も異なり(Safariが最も顕著)、イベントによるドキュメントの操作はサポートされていません.
pdf.js
異なるブラウザの下での展示の統一を保証するために、mozillaのpdfを用いることが考えられる.jsプラグインは、既存の機能を維持してインタフェーススタイルを表示し、統一したほか、イベント制御による上下ページ切替、フルスクリーン、指定したページ数へのジャンプなど、イベントによるドキュメントの操作もサポートしています.
利点:既存の機能に基づいてイベントのサポートが追加され、スタイルも統一されています.
欠点:アクセスリソースは、サーバがドキュメントのどのドメインにもアクセスできるように設定している場合でも、同じソースのプラグインでのみ使用できます.また、ドメイン間で問題が発生し、ファイルのボリュームが大きすぎます.
pdf.jsの使用方法
1、先に公式サイトでプラグイン(npm、CDNs)をダウンロードする

//npm
npm install pdfjs

//cdns
www.jsdelivr.com/package/npm/pdfjs-dist
cdnjs.com/libraries/pdf.js
unpkg.com/pdfjs-dist/

 
2、ローカル運転(導入js方式による使用)
ファイルをローカルにダウンロードすると、2つのフォルダ(web、build)があります.コンテンツが表示されるコアファイルはweb/viewerです.htmlは、ブラウザに同源ポリシーがあるため、ローカルブラウザで直接viewerを開く.htmlではページに何もないことがわかりますが、最も速い方法ではhttp-serverを使用してローカルにサービスを開始することができます(http-serverの簡単な使用方法は文章の末尾にあります)、サービスを開始した後、再びページをリフレッシュすると、ドキュメントの内容が正常に表示されます(現在ダウンロードされているPDFファイルの同級ディレクトリの下のpdfファイルに基づいて表示されます)
 
3、pdfファイルを動的に修正する
ローカルを例に
192.168.1.6:8080/web/viewer.html?file=test.pdf
以上のリンクは2つの部分に分けることができます.
第1部は192.168.1.6:8080/web/viewerである.htmlメインの展示ページ
第2部は?file=test.pdfを主とするドキュメントの内容、test.pdfは現在のサーバディレクトリの下にあるファイルです(ファイルのパスに注意が必要です)
192.168.1.6:8080/web/viewer.html?file=a.pdf
192.168.1.6:8080/web/viewer.html?file=/web/ppt/b.pdf
192.168.1.6:8080/web/viewer.html?file=/static/file/c.pdf
 
4、使用中に注意すべき問題

ドキュメントのパスが正しいかどうか

他のドメインの文書データを使用するかどうか

.

ファイルは表示されず、ブラウザもエラーを報告していません(ドキュメントが大きすぎてダウンロードが遅いかどうかを考慮する必要があります)

.
 
*http-serverの使い方については、以下のように参照してください(nodeに合わせる必要があります)
1、サーバーを起動するディレクトリに入る
2、npm install
3、npm http-server
4、http-server
 

官网pdf.js

githu pdf.js

ドキュメントpdf.js