pdf.jsオンラインプレビュー

1. 2つのメインのjsファイルの導入

<スクリプトSRC = "../のJS / pdf.js "> </ SCRIPT> 
<スクリプトSRC =" ../のJS / pdf.worker.js"> </ SCRIPT>

2.メインJSコード

                聞かせてコンテナ=のdocument.getElementById（ "コンテナ"）; 
                （ "POP"）popId =のdocument.getElementByIdをしましょう。
                チャイルズ= popId.childNodesをしましょう。
                ため（LET I = childs.length - 1; I> = 0; i--）{ 
                    popId.removeChild（チャイルズ[I]）。
                } 
                container.style.display = "ブロック"。
                URL = 'http://192.168.0.176:8020/project/HQS20190811104441.pdfてみましょう。
                // URLを聞かせて= 'http://192.168.0.176:8020/project/2019_PDF.pdf'; 
                pdfjsLib.workerSrcは=」../js/pdf.worker.js'; 
                pdfjsLib.getDocument（URL）.then（関数getPdfHelloWorld（PDF）{
                    //ましょう$ポップ= $（ '＃ポップ'）;
                    shownPageCount = pdf.numPages <50 pdf.numPagesてみましょう： ？50; //は、コーディングの表示設定
                    //非同期/別の場所で問題を解決するためのPDFのページ待た
                    せgetPageAndRender非同期=機能（ページ番号）{ 
                        ましょうpopWidth =のdocument.getElementById（ "POP"を）.offsetWidthは、

                        インクルードがpdf.getPageページ=（PAGENUMBER）待ってみましょう
                        LETスケール= 2; 
                        LET = page.getViewportビューポート（スケール）; 

                        みましょう$キャンバス=のdocument.createElement（ "キャンバス"）;

 
                        //現在のミサイルフレームは、PDFファイルの幅より小さい幅、及びビューポートスケール値回再割り当てと判断した場合
                        であれば（popWidth <viewport.width）{
                            規模= popWidth / viewport.width * 2。
                            ビューポート= page.getViewport（スケール）。
                        } 

                        $ canvas.width = viewport.width * 2。
                        $ canvas.height = viewport.height * 2。
                        $ canvas.style.width = viewport.width + 'ピクセル'; 
                        $ canvas.style.height = viewport.height + 'ピクセル'; 
                        $ pop.appendChild（$キャンバス）; 
                        コンテンツ= $ canvas.getContext（ '2D'）しましょう。
                        content.scale（2,2）。
                        page.render（{ 
                            canvasContext：コンテンツ、 
                            ビューポート：ビューポート
                        }）。

                        （ページ番号<shownPageCount）{もし
                            ページ番号++。
                            getPageAndRender（ページ番号）。
                        } 
                    }。
                    getPageAndRender（1）
                }）。

　3.コンポーネント

                   <DIV ID = "コンテナ"> 
                        <EL-スクロールバークラス= "ページ-component__scroll"> 
                            <div要素のid = "ポップ"> </ div> 
                        </ EL-スクロールバー> 
                    </ div>

　　4.次のような結果は以下のとおりです。