当前位置：网站首页>pdf. JS introduction

pdf. JS introduction

2022-07-26 01:45:00 【Brick dog - Xiaoqiang】

Project background

Load and display... In the web page PDF Documents are the most common business requirements . Most browsers now come with pdf Preview function , But for every browser pdf Loaders are different , Toolbars cannot be customized , To unify different browsers pdf Consistency of Preview , And add some custom functions , We use pdf.js To achieve pdf Preview of .

pdf.js It's a very good pdf Parsing tool , In fact, our Firefox browser kernel comes with pdf The preview parser is pdf.js This parser , We put pdf Open in Firefox and press F12 You can see the content of the source code .

The following is the final effect of the project , Only the print button is left in the toolbar on the right , And trigger the events required by the project when printing , Prevent copying and downloading pdf.

pdf.js Use

Official website address ：http://mozilla.github.io/pdf.js, Download the stable version

Project structure

Project use

Deploy the project to nginx perhaps IIS, Access... Directly in the browser viewer.html You can preview our pdf, How to use it is as follows ,file For what we want to preview pdf File address .

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

Project customization

We need to remove many unnecessary buttons from the toolbar on the right , And edit the button event , We can use PDFViewerApplication Object .

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);