PDFjs-vue-print

Example Vue.js 3 project using PDF.js to build a simple, custom PDF.js viewer and print service. Though, the Javascript code in pdf_lib could be used in any Javascript framework.

This is a simple, bare bones project to load, view and print a PDF document. Based on example code from Mozilla's pdf.js project on GitHub.

Recommended IDE Setup

• VS Code + Volar

Installing

git clone https://gitlab.com/drewlab/pdfjs-vue-print.git
cd pdfjs-vue-print
npm install

Try It

Run the Vite development web server which will display a home page with buttons to view and/or print a PDF document. Open the Javascript console to see console.log() messages added to show the program flow. The examples automatically open the Print Preview Dialog. Cancel it to avoid printing the 14 page PDF document.

Launch "dev serve" or use command line "npm run dev".
Launch "Firefox developer" or in a browser go to http://localhost:3000/.

Project Folders Overview

Here are the relevant project files. Assuming the user has some knowledge of building apps with Vue.js 3.

• package.js - dependency for the pdfjs-dist package.
• src/components/
• src/components/HomePage.vue - main page with component switcher to choose view/print components.
• src/components/ViewNPrint.vue - load custom PDF.js viewer/printer app.
• src/components/ViewOnly.vue - just the custom PDF.js viewer part of the app.
• src/components/PrintOnly.vue - custom PDF.js printer app without using PDF.js PDFViewer.
• src/pdf_lib/
• src/pdf_lib/viewer_app.js - { PDFViewerApp } simple viewer using pdfjs-dist to load and display a PDF document.
• src/pdf_lib/printer_app.js - { PDFPrinterApp } extends PDFViewerApp to handle window printing events.
• src/pdf_lib/print_only_app.js - { PrintOnlyApp } extends PDFViewerApp to handle window printing events.
• src/pdf_lib/print_service.js - { PDFPrintService } handles window.print() request and renders page images for printing on a temporary canvas.
• src/pdf_lib/print_service_factory.js - used by PDFPrinterApp and PrintOnlyApp to create a PDFPrintService instance.
• src/pdf_lib/viewer.css - styles for viewer and printed pages.

Project Notes

In this project I was mainly interested in an simple way to automatically print PDF documents. I looked at various code files in the PDF.js project then combined and stripped out anything that wasn't needed for viewing or printing. The main PDF.js files I looked at where the examples/components/simpleviewer, examples/mobile-viewer and the web/ folder. The web/ folder of the PDF.js project contains many files that make up the behemoth that is the PDF viewer for Firefox and plugins for other browsers. Note, of the PDF.js web/ files only a webpack'd pdf_viewer.js is included in the pdfjs-dist package.

Things that were stripped out include toolbars, sidebars, LinkManager, ScriptManager, Annotations, OverlayManager, most dialogs, etc. If you need those you'll have to do some work to add them back in. The main file to start looking at would be web/app.js (PDFViewerApplication) and the web/viewer.* files.

My PDFViewerApp and PDFPrinterApp could be combined into one class module. I kept them separate while I was learning and dissecting the PDF.js code. You can use the PDFViewerApp without PDFPrinterApp. If you want printing without viewing then use the PrintOnlyApp.

Disabling the Print Preview Dialog

The Print Preview Dialog is part the host application (browser) that displays the web pages, e.g. Firefox, Chrome, Electron. You can't disable it in web page code, because that is a security risk. Disabling the dialog is a function of the host application. In Firefox and Chrome there are configuration settings. In Electron, code written for the Electron main process can disable the dialog using the silent print option.

Using PDF.js with Electron

After trying to integrate [email protected] package into an Electron app I found that electron-forge wanted to rebuild canvas (node-canvas) with node-gyp. The rebuild of [email protected] kept failing. Falling back to a previous release of pdfjs-dist fixed the problem. Release [email protected] does not have a dependency on node-canvas.

Successfully tested Electron and pdfjs-dist with:

"dependencies": {
    "pdfjs-dist": "^2.16.105"
  },
  "devDependencies": {
    "electron": "^21.3.0"
  }

Hope you find this example useful for your PDF printing project. -Drew