オープンソース JavaScript PDF ビューア ライブラリ
この無料のオープンソース JavaScript API を PDF パーサー、ビューアー、リーダー、レンダラー ライブラリとして試してみてください。
PDF.jsとは何ですか?
PDF.js は、Mozilla によって開発されたオープン ソースの JavaScript および HTML5 ベースの PDF ビューア ライブラリで、ブラウザーで PDF (Portable Document Format) ドキュメントを表示できるようにします。
PDF.js は、以下に示すいくつかの機能をサポートしています。
- PDF のレンダリング: Web ブラウザで PDF ドキュメントを開いて表示、読み取り、またはレンダリングできます。
- PDF の印刷/保存: PDF.js を使用すると、お気に入りの Web ブラウザから PDF ドキュメントを印刷または保存することもできます。
- プレゼンテーション モード: プレゼンテーション モードを使用すると、PDF ページを全画面で表示し、プレゼンテーション スライドのように各ページに移動できます。
- PDF ナビゲーション: PDF.js は、次のページまたは前のページに移動できる簡単なナビゲーション コントロールを提供します。ページ番号を入力することで、目的のページに素早くジャンプすることもできます。
- PDF 注釈: PDF ページにテキスト、画像、描画を追加して、PDF 文書に注釈を付けることもできます。
- PDF ページの回転: PDF.js を使用すると、PDF ページを時計回りまたは反時計回りに回転することもできます。
- PDF のスクロール: PDF.js は、ページを水平または垂直にスクロールするための優れたコントロールを提供します。
- PDF ドキュメントのプロパティ: 最後になりましたが、PDF.js ビューアを使用してブラウザ内で PDF ドキュメントのプロパティを表示することもできます。
PDF.js の入門
PDF.js を入手して Web プロジェクトで使用を開始するには、3 つの方法があります。
1. ソースからビルドする
GitHub から PDF.js リポジトリのクローンを作成し、Node.js のダウンロードとインストール、gulp以下の手順に従って、PDF.js の依存関係を作成します。
ローカルマシン上で PDF.js git リポジトリのクローンを作成し、pdf.js フォルダーに切り替えます
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Node.jsをインストールする
https://nodejs.org/en/download
gulp パッケージをグローバルにインストールする
npm install -g gulp-cli
PDF.js の依存関係をインストールする
npm install
gulp サーバーを実行し、ブラウザで http://localhost:8888/web/viewer.html にあるビューアを開きます。
gulp server
2. 事前に構築されたディストリビューションを使用する
PDF.js は、GitHub の PDF.js リリース でソース コードとともにビルド済みのディストリビューションも提供します。 。事前に構築された PDF.js ライブラリをダウンロードして使用を開始できます。
3. CDN 経由でホストされたライブラリを使用する
PDF.js は無料の CDN サーバーでもホストされています。以下にいくつかのリンクを共有します。
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
PDF.js ビューアを実行する
GitHub から事前に構築された配布ライブラリをダウンロードして抽出すると、build< という 2 つのフォルダが見つかります。 /strong> とウェブ。 PDF.js ライブラリ ファイルは build フォルダにあり、web フォルダには viewer.html、viewer.css、viewer.js および関連ファイルを含むビューア プロジェクトが含まれています。 viewer.html コードをチェックすると、ビルド フォルダーの pdf.js ライブラリと、その他の関連する CSS ファイルおよび js ファイルも参照していることがわかります。
ブラウザで viewer.html を実行して、PDF.js ビューアがどのように表示されるかを確認してみましょう。
PDF ドキュメントのレンダリング/表示
PDF.js ビューア ライブラリを使用してブラウザで PDF ドキュメントを単純にレンダリングまたは表示するには、script タグを使用して PDF.js ライブラリを HTML ドキュメント ヘッダーに組み込み、キャンバス を追加する必要があります。 > を HTML 本文に追加し、pdfjsLib を使用するために必要な JavaScript コードを追加し、PDF ドキュメントの非同期読み込みとレンダリングを処理するオブジェクトを約束します。
上記のコードは、以下のようなユーザー インターフェイスやコントロールを使用せずに、ブラウザーに PDF ドキュメントをロードするだけです。
オンラインデモ
この完全な機能を備えた オンラインでお試しくださいPDF.js ライブラリのすべての機能を調べるための PDF.js ビューア デモ。
結論
PDF.js は、強力なコミュニティを持つ無料のオープンソース JavaScrpit PDF ビューア ライブラリです。最新のブラウザと従来のブラウザの両方にクロスブラウザ サポートを提供します。はい、従来のブラウザーでのユーザー エクスペリエンスは最新のブラウザーと同じではないかもしれませんが、それでも無料のライブラリとしては優れています。安全でカスタマイズ可能です。機能は限られていますが、PDF ビューアーとしては非常に優れています。
PDF.js は、Web ベースの PDF ビューアを構築するための優れた API とアーキテクチャを提供します。開発者の時間を節約するためにビューアにさらに UI コントロールを追加するには時間がかかるため、PDF.js では、完全に機能する機能豊富な PDF ビューアのソース コードも提供しています (viewer.html、viewer.js、およびviewer.css など) PDF.js ライブラリ配布パッケージのweb フォルダーにあります。
