how to improve the print quality with pdf.js to print pdf document?

Question

The Issue:

When I use pdf.js to print PDF documents, the text on paper is not very clear like print PDF directly.

How to resolve it?

Answer 1

PDF.js renders the PDF to a HTML canvas and then sends the rendered image to the printer. To improve the quality of the image being sent to the printer, you need to increase the DPI or resolution of the image.

There have been several bugs raised about the issue:

• https://github.com/mozilla/pdf.js/issues/7094
• https://github.com/mozilla/pdf.js/issues/7041
• https://github.com/mozilla/pdf.js/issues/6498
• https://github.com/mozilla/pdf.js/issues/6241

Here is the Pull Request. To apply the patch, find the beforePrint function and make the following changes to viewer.js.

viewer.js

  // increase to improve quality
  var viewport = pdfPage.getViewport(4);
  // Use the same hack we use for high dpi displays for printing to get
  // better output until bug 811002 is fixed in FF.
  var DPI = 72; // increase to improve quality
  var PRINT_OUTPUT_SCALE = DPI/72; 
  var canvas = document.createElement('canvas');

  // The logical size of the canvas.
  canvas.width = Math.floor(viewport.width * PRINT_OUTPUT_SCALE);
  canvas.height = Math.floor(viewport.height * PRINT_OUTPUT_SCALE);

  // The rendered size of the canvas, relative to the size of canvasWrapper.
  canvas.style.width = '100%';

  CustomStyle.setProp('transform' , canvas, 'scale(1,1)');
  CustomStyle.setProp('transformOrigin' , canvas, '0% 0%');

  var canvasWrapper = document.createElement('div');
  canvasWrapper.style.width = '100%';
  canvasWrapper.style.height = '100%';

  canvasWrapper.appendChild(canvas);
  printContainer.appendChild(canvasWrapper);

To improve quality, increase the viewport factor to a higher value.