Mozilla＆＃x27; s pdf.jsを使用したJavaScriptでのカスタムPDFレンダリング

ジョニ・ハルティカネン、フロリアン・ラップル、ジェゼン・トーマス、ジェフ・スミスがレビューしたピア。 SitePointのピアレビュアーに貢献してくれたことに感謝します！ ほとんどの最新のブラウザはPDFの視聴をネイティブにサポートしていますが、この機能は開発者の直接的な制御を超えています。 WebアプリのPDFディスプレイをカスタマイズする必要があることを想像してください - 印刷ボタンを無効にするか、ユーザーのサブスクリプションに基づいてページアクセスを制限します。

タグはブラウザのネイティブレンダラーを利用していますが、このようなカスタマイズのプログラム制御が不足しています。

Mozilla Labsの強力なライブラリであるPDF.jsを入力します。 ブラウザ内でPDFをレンダリングし、開発者がレンダリングプロセスを完全に制御できるようにします。 <embed></embed>

pdf.jsの重要な機能：

フルコントロール：

ブラウザの制限をバイパスし、PDFレンダリングをカスタマイズします

• html5ベース：プラグインなしの最新のブラウザで動作します
レンダリングオプション：
• 柔軟な実装のためにCanvasとSVGをサポートします 非同期荷重：
大規模なファイルの効率的な取り扱いの約束を使用します。
• 高度な機能：テキストレイヤーレンダリング、カスタムズームなどを有効にします
• pdf.js
を理解しています HTML5に基づいて構築された
• PDF.jsは、サードパーティのプラグインの必要性を排除します。 その使用は、シームレスなオンラインPDF表示のために、さまざまなオンラインファイル共有サービス（Dropbox、CloudUp、Jumpshareなど）に拡張されます。 信じられないほど便利ですが、PDF.JSの統合は、テキストレイヤー、注釈、パスワードで保護されたファイルなどの高度な機能に関するドキュメントが限られているため、挑戦的です。 この記事では、pdf.js統合について説明します 基本的な統合

svgレンダリング

テキストレイヤーレンダリング

ズーム

基本的な統合

• 1。必要なファイルのダウンロード：
pdf.jsはJavaScriptライブラリです。
• と
が必要です。 node.jsとgulpはダウンロードのオプションですが、より簡単なアプローチはこれらの直接のURLを使用することです（常に最新バージョンを提供します）：

pdf.js2。 Webワーカーとpdf.js：pdf.worker.js

PDF解析とレンダリングは計算集中です。 PDF.JSは、HTML5 Webワーカーをレバレッジして、これらのタスクを別のスレッドにオフロードし、ブラウザのロックアップを防ぎます。 これはデフォルトの動作ですが、必要に応じて無効にすることができます。
• https://mozilla.github.io/pdf.js/build/pdf.js3。 pdf.jsでの約束：
• https://mozilla.github.io/pdf.js/build/pdf.worker.jsPDF.JS APIは、クリーンな非同期操作処理の約束を利用しています。

4。 簡単な例：

単純な「Hello World！」をレンダリングしましょう。 PDF（http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdfで入手可能）。 ファイルがローカルWebサーバーを介して提供されていることを確認してください（例：http://localhost/pdfjs_learning/index.html）。

にpdf.js：index.htmlを含めます

<🎜>

同じディレクトリにない場合は、

パスをオプションで指定できます。 pdf.worker.js

次に、次のJavaScriptを追加してPDFをレンダリングします：

PDFJS.workerSrc = "/path/to/pdf.worker.js";

そして

var url = "http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf";

PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });

：

に<canvas></canvas>要素を追加します index.html このコードは、PDFをキャンバスに取得、解析、およびレンダリングします。

非同期ダウンロードを開始します。

<canvas id="the-canvas"></canvas>

特定のページを取得します。

レンダリングを実行します。PDFJS.getDocument() pdf.getPage()page.render()SVG PDF.JSはSVGレンダリングもサポートしています。 SVGを使用するには、

セクションを変更してください：

をpage.render()

page.getOperatorList()
  .then(function(opList) {
    var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
    return svgGfx.getSVG(opList, viewport);
  })
  .then(function(svg) {
    container.appendChild(svg);
  });

に置き換えますあなたのhtml。で

テキストレイヤーのレンダリング テキストの選択を有効にするには、 text_layer_builder.js

および text_layer_builder.css<p>をダウンロードし、HTMLに含めてください。 より複雑なPDF（例：<code> http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-09.pdf<code>text_layer_builder.js）を使用します。 次のコードは複数のページをレンダリングし、テキストレイヤーを追加します。 text_layer_builder.css http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf

ズーム

<🎜>

スケールを調整して変数ズームレベルを制御します

結論scale

PDF.JSは、カスタムPDFレンダリングをWebアプリケーションに統合するための強力で柔軟な方法を提供します。 クリーンなAPIと非同期処理により、開発者にとって貴重なツールになります。 コードを試して、その高度な機能を調べてください！

よくある質問（FAQ）

（簡潔に要約）

カスタムレンダリングの目的：

Webアプリケーション内でシームレスなユーザーエクスペリエンスを提供し、外部のPDF視聴者の必要性を排除します。

• PDF.jsの動作方法： HTML5およびWeb標準を使用してPDFSを解析およびレンダリングします。
実装：
• ライブラリを含め、APIを使用してキャンバスにロードしてレンダリングします。 カスタマイズ：
キャンバスを操作し、CSSを使用してスタイルを使用します
• 制限：複雑なPDFに苦労する可能性があります。パフォーマンスはファイルのサイズとデバイスに依存します。
• パフォーマンスの改善：PDFファイルを最適化し、Lazy Loadingを使用します
互換性：
• 他のJavaScriptライブラリとうまく動作します ライセンス：
オープンソース（Apacheライセンス2.0）。
• 貢献：
プロジェクトに貢献していただきます。
• サポート：
公式ドキュメントとGithubコミュニティを参照してください。

以上がMozilla＆＃x27; s pdf.jsを使用したJavaScriptでのカスタムPDFレンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。