オープンソース JavaScript PDF ビューア ライブラリ
PDF ドキュメントを表示するための無料のオープンソース JavaScript ライブラリ。
PDFオブジェクトとは何ですか?
PDFObject は、Web ページに PDF ドキュメントを埋め込むために開発された無料のオープンソース JavaScript ライブラリです。これは、HTML 埋め込み要素を生成し、それを HTML 構造に統合することによって機能します。次に、embed 要素が PDF ドキュメントをレンダリングします。 PDFObject 自体はレンダラーではありません。むしろ、embed 要素を作成して HTML 内に配置することに重点を置いています。 PDF をフルサイズで表示するため、または Web ページの指定されたセクション内に表示するための埋め込み要素を作成できます。
PDFObject の主な機能の一部を次に示します。
- フォールバック メカニズム: PDFObject にはフォールバック メカニズムがあるため、ブラウザが PDF の埋め込みをサポートしていない場合、PDFObject はフォールバック ロジックを自動的にアクティブにし、開発者が必要に応じて PDF へのリンクまたはその他の代替ロジックを提供できるようにします。 。
- PDF.js の統合: PDFObject は、PDF.js とのオプションの統合を提供しており、開発者はブラウザのデフォルトの PDF に関係なく PDF を埋め込むことができます。視聴者。この機能は、ブラウザが HTML への PDF ドキュメントの埋め込みをサポートしていない場合に便利です。
- PDF オープン パラメータ: PDFObject は、Adobe 独自のPDF オープン パラメータをサポートしており、開発者は PDF 表示のパラメータを指定できます。これには、表示モードやその他の Adobe 固有の設定などのオプションが含まれます。これらのパラメータはすべて、こちらでご覧いただけます。
PDFObject の使用を開始する
npm モジュールを使用して PDFObject ライブラリをダウンロードできます。
NPM を使用してインストールする
npm i pdfobject
ブラウザサポート検証による HTML への PDF の埋め込み
PDFObject ライブラリを使用して、PDF ドキュメントを HTML に埋め込むことができます。最初に、PDFObject ライブラリのsupportsPDFs メソッドを使用して、ブラウザが HTML への PDF ドキュメントの埋め込みをサポートしているかどうかを確認します。 HTML への PDF の埋め込みをサポートすることを示す true を返した場合は、embed("document_name.pdf","#elementid") メソッドを使用して PDF を HTML に埋め込みます。この関数は、HTML 内の特定の要素に PDF を埋め込みます。フルサイズの PDF 埋め込みの場合、要素 ID については言及せず、メソッドをembed("document_name.pdf") として呼び出します。ただし、HTML への PDF の埋め込みをサポートしていないことを示す false が返された場合は、必要に応じて他の代替ロジックに移行します。詳細については、以下のコード スニペットを確認してください。
出力
次の出力には、HTML に埋め込まれた PDF ドキュメントが表示されます。
フォールバックメカニズムを作成する
ブラウザが HTML への PDF の埋め込みをサポートしていない場合にアクティブ化される PDFObject を使用して、Web ページに PDF を埋め込むときにフォールバック メカニズムを確立できます。 PDFObject は、embed 関数の呼び出し中に代替ロジックを含む fallbackLink と呼ばれるパラメータを利用します。したがって、ブラウザが PDF の埋め込みをサポートしていない場合、fallbackLink にあるコードは、指定された div 要素で実行されます。詳細については、以下のコード スニペットを確認してください。
出力
出力スクリーンショットには、フォールバック メカニズムによって表示されるコンテンツが表示されます。フォールバック メカニズムは、ブラウザが HTML への PDF の埋め込みをサポートしていない場合にアクティブになりました。
Adobe の PDF オープンパラメータを使用して PDF を埋め込む
PDFObject ライブラリを使用して、いくつかの開始パラメータとともに PDF を埋め込むことができます。 PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: {parameters }}) メソッドを使用して、開始パラメータとともに PDF ドキュメントを HTML に埋め込みます。 。これらの PDF オープン パラメータには、PDF を開いたり、特定のページ番号までスクロールしたりする機能が含まれています。詳細については、以下のコード スニペットを確認してください。
出力
次のスクリーンショットは、レンダリング後に埋め込み要素をページ番号 3 までスクロールさせる追加パラメーターを使用して HTML に埋め込まれた PDF ドキュメントを示しています。
PDF.jsを統合してPDFを埋め込む
ご存知のとおり、PDFObject は HTML に PDF を埋め込むためのブラウザーのサポートに依存していますが、ブラウザーがサポートしていない場合に PDF をレンダリングするための代替方法を提供します。別の方法は、PDF.js を PDFObject と統合することです。これを行うには、サーバー上に PDF.js をセットアップし、ForcePDFJS: true と PDFJS_URL: path/to/viewer.html/in/pdf を渡す必要があります。 .js パラメータを embed 関数に追加します。
注: 以下のサンプル コード スニペットでは、PDF.js ライブラリを含むサーバーを作成して起動しているため、http://localhost:8888 は PDF.js ライブラリを指します。
出力
次のスクリーンショットは、PDFObject と PDF.js を統合することによってレンダリングされた PDF ドキュメントを示しています。
結論
結論として、PDFObject は、PDF ドキュメントを HTML に埋め込むための使いやすい JavaScript ライブラリです。レンダラとして機能せず、ブラウザの埋め込み要素のサポートに依存しているため、埋め込み要素をサポートしていないブラウザで UI が壊れるなどの問題が発生する可能性がありますが、このライブラリには、埋め込み要素のサポート検出を通じてそのような問題を解決する機能があります。埋め込み要素とフォールバックメカニズム。 PDF.js を PDFObject と統合することで、埋め込み要素をサポートしていないブラウザでも PDF をレンダリングできます。 PDFObject は、その制限にもかかわらず、Web ページに PDF ドキュメントを埋め込んでレンダリングするための貴重なツールとして際立っています。
