pdf.jsの使い方紹介

プロジェクトの背景

PDF ファイルを Web ページにロードして表示することは、最も一般的なビジネス要件です。現在のほとんどのブラウザには PDF プレビュー機能が搭載されていますが、各ブラウザの PDF ローダーは異なり、ツールバーはカスタマイズできません。異なるブラウザでの PDF プレビューの一貫性を統一し、いくつかのカスタム機能を追加するために、pdf.js を使用します。 PDF プレビューを実装します。

pdf.js は非常に優れた PDF 解析ツールです。実際、Firefox ブラウザのコアに付属する PDF プレビューパーサーは pdf.js です。Firefox で PDF を開いて F12 キーを押すと、ソースコードの内容が表示されます。。

以下は、プロジェクト実装の最終的な効果です。右側のツールバーには印刷ボタンのみが残り、印刷時にプロジェクトに必要なイベントがトリガーされ、PDF のコピーやダウンロードが防止されます。

pdf.jsの使用

公式 Web サイトのアドレス: http://mozilla.github.io/pdf.js、安定版をダウンロード

プロジェクトの構造

プロジェクト利用

プロジェクトを nginx または IIS にデプロイし、ブラウザで viewer.html に直接アクセスして PDF をプレビューします。使用法は次のとおりです。file はプレビューしたい PDF ファイルのアドレスです。

127.0.0.1/pdfjs-2.14.305-dist/web/viewer.html?file=/pdfjs-2.14.305-dist/web/compressed.tracemonkey-pldi-09.pdf

プロジェクトのカスタマイズ

右側のツールバーにある多くの不要なボタンを削除し、ボタンイベントを編集する必要がありますが、PDFViewerApplication オブジェクトを使用して調整できます。

window.onload = function () {
    PDFViewerApplication.appConfig.toolbar.presentationModeButton.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.openFile.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.download.classList.add("hidden");
    PDFViewerApplication.appConfig.toolbar.viewBookmark.classList.add("hidden");
}

function onbeforeprint() {
    var url = GetQuery1("file");
    var urlParams = parseUrlParams(url);

    $.ajax({
        type: "get",
        url: "/PrintCount?sCardNos=" + urlParams.sCardNos,
        success: function (data) { }
    });
}
window.addEventListener("beforeprint", onbeforeprint);

プロジェクトの展開

IIS での展開には、MIME type.properties text/plain を追加する必要があります

他の

プレビュー中の自動印刷を無効にするには、viewer.js メソッド _updateFromSandbox 内の次のコードをコメントアウトします。

pdf.js はデモを使用しています (非表示の印刷ダウンロードとその他のボタンは解決されています) - Javascript ドキュメントリソース - CSDN ダウンロード