如何使用pdf.js提高打印PDF文档的质量？

Question

问题：

我使用pdf.js打印PDF文档时，纸上的文字不像直接打印PDF那样清晰。

如何解决？

- 令狐葱

---

我看到了类似的问题，https://dev59.com/Qnzaa4cB1Zd3GeqPPWWk，但还没有解决方案。 - 令狐葱

请参考此答案或如何使用PDF.js查看器提高PDF文件的打印质量获取更多详细信息。 - Gyrocode.com

Answer 1

PDF.js会将PDF渲染到HTML画布上，然后将渲染后的图像发送到打印机。为了提高发送到打印机的图像质量，需要增加图像的DPI或分辨率。

关于这个问题已经提出了几个错误报告：

• 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

这里是拉取请求。要应用补丁，请找到beforePrint函数，并对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);

为了提高质量，将视口系数增加到更高的值。

- pixelbits