8

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?

令狐葱
  • 1,117
  • 12
  • 12
  • 2
    I have seen similar question, http://stackoverflow.com/questions/21719393/how-to-improve-display-quality-in-pdf-js, but no solution yet. – 令狐葱 Mar 31 '16 at 10:04
  • See [this answer](https://stackoverflow.com/a/49096257/3549014) or [How to increase print quality of PDF file with PDF.js viewer](https://www.gyrocode.com/articles/how-to-increase-print-quality-of-pdf-file-with-pdf-js-viewer/) for more details. – Gyrocode.com Mar 06 '18 at 17:29

1 Answers1

3

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:

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.

Michael Kang
  • 52,003
  • 16
  • 103
  • 135