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.


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;
  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.fillStyle = 'rgb(255, 255, 255)';
  ctx.fillRect(0, 0, scratchCanvas.width, scratchCanvas.height);
  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.


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.


150 DPI

300 DPI


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

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.