ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript PDFビューアを作成する方法
JavaScript PDFビューアを作成する方法
- Jennifer Anistonオリジナル
- 2025-02-26 09:30:14311ブラウズ
ポータブルドキュメント形式、または略してPDFは、特にオフラインで印刷または読み取られる可能性が高い場合、正確にフォーマットされたテキストと画像の多くを含むドキュメントを共有するのに最適です。ほとんどの最新のブラウザはPDFファイルを表示できますが、独立したタブまたはウィンドウで実行されるPDFビューアーを使用してそうしているため、ユーザーはWebサイトを離れます。 Webページ内でPDFファイルを解析してレンダリングします。このチュートリアルでは、それを使用して、ゼロから完全に生まれたカスタムJavaScript PDF Viewerを作成する方法を紹介します。 ユーザーインターフェイスの作成
新しいWebページを作成し、通常のHTML5ボイラープレートコードを追加して、このJS PDF Viewerチュートリアルを開始します。 >、JSのPDFビューアーのコンテナとして機能する
要素を作成します。 PDFビューアーはHTML5要素になります。その内部のPDFファイルのページをレンダリングします。したがって、次のコードを
要素内に追加します。
<!doctype html><br> <br><html lang="en"><br><head><br> <meta charset="utf-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1"><br> <title>My PDF Viewer</title><br></head><br><body><br> <br></body><br></html><br>物事をシンプルに保つには、いつでもキャンバス内に1つのページのみをレンダリングします。ただし、ボタンを押して、ユーザーが前のページまたは次のページに切り替えることができます。さらに、現在のページ番号を表示し、ユーザーが希望する任意のページにジャンプできるようにするために、インターフェイスに入力フィールドがあります。
<body><div>ズーム操作をサポートするには、インターフェイスにさらに2つのボタンを追加します。 ：1つはズームインし、1つはズームアウトします。
<div id="my_pdf_viewer"><br> <br></div><br>
このセクションの最後に、Webページコードは次のようになります。 pdf.jsを取得<canvas><div>JavaScript PDF ViewerのBare-Bonesユーザーインターフェイスの準備ができたので、Webページにpdf.jsを追加しましょう。ライブラリの最新バージョンはCDNJSで利用できるため、Webページの最後に次の行を追加するだけでそうすることができます。 、PDFJS-Distリポジトリからダウンロードできます。 PDFファイルの読み込みオブジェクトの
<div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br>メソッド。
<!doctype html><br> <br><html lang="en"><br><head><br> <meta charset="utf-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1"><br> <title>My PDF Viewer</title><br></head><br><body><br> <br></body><br></html><br>
getDocument()メソッドは内部的にXMLHttpRequestオブジェクトを使用してPDFファイルをロードすることに注意してください。これは、ファイルが独自のWebサーバーまたはクロスオリジンリクエストを許可するサーバーに存在する必要があることを意味します。 。PDFファイルが正常に読み込まれたら、状態オブジェクトのプロパティを更新できます。 JSのPDFビューアーがPDFファイルの最初のページを自動的にレンダリングするように、pdf名前が付けられました。次のステップで関数を定義します。 ページをレンダリング
<div id="my_pdf_viewer"><br> <br></div><br>オブジェクトの
メソッドを呼び出してページ番号を渡すことにより、PDFファイルの任意のページへの参照を取得できます。とりあえず、私たちの州のオブジェクトのrender()プロパティを渡しましょう。この方法も約束を返しますので、結果を処理するためにコールバック関数が必要です。
<div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br>したがって、次のコードを含む
という新しい関数を作成します。実際にページをレンダリングするには、コールバック内で使用可能な
オブジェクトのメソッドを呼び出す必要があります。引数として、このメソッドは、キャンバスとオブジェクトの2Dコンテキストを期待しています。 getPage()メソッドは、目的のズームレベルを引数として期待するため、状態オブジェクトのpdfプロパティを渡す必要があります。ページとズームレベル。ビューポート全体がキャンバスにレンダリングされることを確認するために、キャンバスのサイズを変更してビューポートのサイズを変更する必要があります。方法は次のとおりです。currentPage
この時点で、先に進んでページをレンダリングできます。 render()
<div id="navigation_controls"><br> <button id="go_previous">Previous</button><br> <input id="current_page" value="1" type="number"/><br> <button id="go_next">Next</button><br></div><br>cssプロパティを
に設定するrender()要素に固定幅と高さを与えることだけが必要です。このプロパティは、必要に応じて、スクロールバーをpage要素に追加し、ユーザーが水平方向と垂直の両方をスクロールできるようにします。
Webページの<head>タグ内に次のコードを追加します：
<!doctype html><br> <br><html lang="en"><br><head><br> <meta charset="utf-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1"><br> <title>My PDF Viewer</title><br></head><br><body><br> <br></body><br></html><br>
もちろん、幅と高さを自由に変更したり、メディアクエリを使用して要素は要件と一致します。<div>
要素をより明確に見せることができます。画面にこのようなものが表示されるはずです：<div>
<div id="my_pdf_viewer"><br> <br></div><br>5。 現在のページを変更するJavaScript PDF Viewerは、現在、PDFファイルの最初のページのみを表示できます。ユーザーがレンダリングされているページを変更できるようにするには、クリックイベントリスナーを以前に作成した
およびボタンに追加する必要があります。状態オブジェクトの
プロパティを減らして、を下回らないようにします。そうすると、go_previous関数をもう一度呼び出して新しいページをレンダリングすることができます。go_next
テキストフィールドの値を更新する必要があります。次のコードには、次の方法が表示されます。 プロパティを使用して決定できます。 テキストフィールドに追加する必要があります。ユーザーは、ページ番号を入力して あなたは PDF.jsを使用してWebサイトのカスタムJavaScript PDF Viewerを作成する方法を知っています。 JavaScriptのPDFドキュメントの新しい視聴者を使用すると、組織のパンフレット、白い論文、フォーム、および一般的にハードコピーとして配布されることを意図して、組織のパンフレット、白い論文、フォーム、その他のドキュメントを表示しながら、シームレスなユーザーエクスペリエンスを自信を持って提供できます。公式のGithub RepoのPDF.JSの詳細go_previouscurrentPage1同様に、render()ボタンのイベントリスナー内で、current_page<div id="canvas_container"><br> <canvas id="pdf_renderer"></canvas><br></div><br>
最後に、キープレスイベントリスナーをgo_nextキーを入力するだけで、希望する任意のページに直接ジャンプできます。イベントリスナー内では、ユーザーが入力した数値がゼロよりも大きく、currentPageプロパティよりも等しいか等しいかを確認する必要があります。 PDFファイルの任意のページを表示します。 ズームレベルを変更するnumPages_pdfInfo<div id="navigation_controls"><br> <button id="go_previous">Previous</button><br> <input id="current_page" value="1" type="number"/><br> <button id="go_next">Next</button><br></div><br>
プロパティを既に使用しているため、ズームレベルの調整は、プロパティを増やしたり、関数を呼び出したりするのと同じくらい簡単です。 current_pageボタンのクリックオンイベントリスナー内で、。 numPagesボタンのクリック中のイベントリスナー、<!doctype html><br> <br><html lang="en"><br><head><br> <meta charset="utf-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1"><br> <title>My PDF Viewer</title><br></head><br><body><br> <br></body><br></html><br>
zoomプロパティに上限と下限を追加することができますが、それらは必要ありません。 JavaScriptのPDFビューアーの準備はできました。 Webページをもう一度更新する場合は、JavaScriptのPDFドキュメントにあるすべてのページを表示し、ズームインまたはズームアウトできるはずです。 JavaScriptでPDFドキュメントの視聴者を作成することを学びました！
以上がJavaScript PDFビューアを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。