How to increase print quality of PDF file with PDF.js viewer

I have been experimenting with using the latest stable PDF.js (v1.9.426) for displaying and printing documents containing text and barcodes. On paper barcodes appeared blurry which wasn’t acceptable.

There are so many posts online regarding PDF.js print resolution problem including this issue on GitHub without a clear solution. There is nothing in Frequently Asked Questions either.

Solution

After some unsuccessful attempts I have decided to review the source code of web/viewer.js. I discovered function renderPage that had print resolution hard-coded as 150 DPI, see line 3619 below.

function renderPage(activeServiceOnEntry, pdfDocument, pageNumber, size) {
  var scratchCanvas = activeService.scratchCanvas;
  var PRINT_RESOLUTION = 150;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
  scratchCanvas.width = Math.floor(size.width * PRINT_UNITS);
  scratchCanvas.height = Math.floor(size.height * PRINT_UNITS);
  var width = Math.floor(size.width * _ui_utils.CSS_UNITS) + 'px';
  var height = Math.floor(size.height * _ui_utils.CSS_UNITS) + 'px';
  var ctx = scratchCanvas.getContext('2d');
  ctx.save();
  ctx.fillStyle = 'rgb(255, 255, 255)';
  ctx.fillRect(0, 0, scratchCanvas.width, scratchCanvas.height);
  ctx.restore();
  return pdfDocument.getPage(pageNumber).then(function (pdfPage) {
    var renderContext = {
      canvasContext: ctx,
      transform: [PRINT_UNITS, 0, 0, PRINT_UNITS, 0, 0],
      viewport: pdfPage.getViewport(1, size.rotation),
      intent: 'print'
    };
    return pdfPage.render(renderContext).promise;
  }).then(function () {
    return {
      width: width,
      height: height
    };
  });
}

To change print resolution to 300 DPI, simply change the line below in web/viewer.js.

  var PRINT_RESOLUTION = 300;

Please note that line numbers will be different for your version of PDF.js.

Support for changing print resolution as shown above has been added in this commit. According to the release tags, all PDF.js versions from 1.7.x to 1.10.x should have that ability now.

Results

150 DPI

300 DPI

Caveats

Increasing print resolution will also increase memory consumption by the web page and may result in browser becoming unresponsive or crashing.

Update (May 25, 2019)

There has been an update to PDF.js viewer (see this pull request #10854) that allows to set print resolution without modifying web/viewer.js. Per Tim van der Meij:

The generic viewer now exposes the printResolution app option thanks to #10854 so the pre-built viewer does not have to be modified for this anymore. Note that increasing the print resolution, while improving print quality, might make printing slower and/or the browser less responsive, but this is now a trade-off that viewer users can make themselves.

Once this update will be released, modifying print resolution with the latest PDF.js can simply be done using the code below:

document.addEventListener('webviewerloaded', function() {
  PDFViewerApplicationOptions.set('printResolution', 300);
});

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension

jQuery DataTables: Row selection using checkboxes

jQuery DataTables: Why click event handler does not work

jQuery DataTables: Alphabetical Search