Background of the project
Loading and displaying PDF files in web pages is the most common business requirement. Most of today's browsers come with a PDF preview function, but each browser's PDF loader is different, and the toolbar cannot be customized. In order to unify the consistency of PDF previews in different browsers, and add some custom functions , we use pdf.js to implement pdf preview.
pdf.js is a very excellent pdf parsing tool. In fact, the pdf preview parser that comes with the core of our Firefox browser is pdf.js. When we open the pdf in Firefox and press F12, we can see the source code content.
The following is the final effect of the project implementation. Only the print button is left on the right toolbar, and the events required by the project are triggered when printing to prevent copying and downloading pdf.
Use of pdf.js
Official website address: http://mozilla.github.io/pdf.js, download the stable version
project structure
Project use
Deploy the project to nginx or IIS, and access viewer.html directly in the browser to preview our pdf. The usage is as follows, file is the address of the pdf file we want to preview.
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 in the right toolbar and edit the button events. We can use the PDFViewerApplication object to make adjustments.
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);Project deployment
Deployment in IIS requires adding MIME type.properties text/plain
other
To disable automatic printing during preview, comment out the following code in the viewer.js method _updateFromSandbox.
