オープンソースの JavaScript PDF ビューア ライブラリ
PDF ドキュメントを表示するための無料のオープンソース JavaScript ライブラリ。
PDFObject とは何ですか?
PDFObject は、Web ページに PDF ドキュメントを埋め込むために開発された、無料のオープン ソース JavaScript ライブラリです。HTML 埋め込み要素を生成し、それを HTML 構造に統合することで機能します。埋め込み要素は PDF ドキュメントをレンダリングします。PDFObject 自体はレンダラーではなく、埋め込み要素を作成して 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 ライブラリを使用して、HTML に PDF ドキュメントを埋め込むことができます。最初に、PDFObject ライブラリの supportsPDFs メソッドを使用して、ブラウザーが HTML への PDF ドキュメントの埋め込みをサポートしているかどうかを確認します。HTML への PDF の埋め込みをサポートしていることを示す true が返された場合は、embed("document_name.pdf","#elementid") メソッドを使用して HTML に PDF を埋め込みます。この関数は、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 は HTML に PDF ドキュメントを埋め込むための使いやすい JavaScript ライブラリです。レンダラーとしては機能せず、埋め込み要素に対するブラウザーのサポートに依存しているため、埋め込み要素をサポートしていないブラウザーでは UI が壊れるなどの問題が発生する可能性がありますが、ライブラリには埋め込み要素のサポート検出とフォールバック メカニズムを通じてそのような問題を解決する機能があります。PDF.js を PDFObject と統合することで、埋め込み要素をサポートしていないブラウザーで PDF をレンダリングすることもできます。制限はあるものの、PDFObject は Web ページに PDF ドキュメントを埋め込んでレンダリングするための貴重なツールとして際立っています。
