pdfjs-vue-print

PDF.js + Vue 3 + Vite

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

This is a simple, bare bones project to load, view and print a PDF document. Based on 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 PDF document. Try to print the PDF using Ctrl-P or Print menu command. Check the Javascript console as console.log messages have been added to document the program flow.

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 and Vite.

• package.js - dependency for the pdfjs-dist package.
• src/components/ViewNPrint.vue - script to load the custom viewer/printer app with simplified HTML template culled from PDF.js web/viewer.html.
• src/pdf - folder with custom viewer/printer app.
• src/pdf/viewerapp.js - { PDFViewerApp } simple viewer using pdfjs-dist to load and display a PDF document.
• src/pdf/printerapp.js - { PDFPrinterApp } extends PDFViewerApp to handle window printing events.
• src/pdf/printservice.js - { PDFPrintService } handles window.print() request and renders page images for printing on a temporary canvas.
• src/pdf/printservicefactory.js - used by PDFPrinterApp to create a PDFPrintService instance.
• src/pdf/viewer.css - styles for viewer and printed pages, loaded by VueNPrint.vue.
• public/images - images from PDF.js examples/mobile-browser that are referenced in viewer.css, but not currently used by this project.

Project Notes

In this project I was mainly interested in an "easy" way to 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 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. These files are not included in the npm pdfjs-dist package.

Things that were stripped out include toolbars, sidebars, LinkManager, ScriptManager, Annotations, OverlayManager, dialogs, password, thumbnails, 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.

Printing without 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 PDF.js with Electron

After trying to integrate pdfjs-dist@3.0.279 package into an Electron app I found that electron-forge wanted to rebuild canvas (node-canvas) with node-gyp. The rebuild of canvas@2.10.2 kept failing. Falling back to a previous release of pdfjs-dist fixed the problem. Release pdfjs-dist@2.16.105 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