如何提高 pdf.js 中的显示质量答案

【问题标题】：How to improve display quality in pdf.js如何提高 pdf.js 中的显示质量
【发布时间】：2014-03-10 06:35:12
【问题描述】：

我正在使用来自 mozilla(pdf.JS) 的 PDF 文档的开源库。当我试图打开质量差的 pdf 文档时，查看器会以非常差的质量显示它。

但如果我在阅读器或浏览器中打开它（拖放到新窗口中），文档会显示得很好

可以改变吗？这是github上的这个库mozilla pdf.js

【问题讨论】：

是的，请通过github.com/mozilla/pdf.js 报告并在github.com/mozilla/pdf.js/wiki/… 提供所有要求的信息
您可以发布有问题的 PDF 吗？我的猜测/假设是有问题的字体是 Type 3 位图字体，而 pdf.js 无法很好地消除锯齿。
看起来 pdf 是library.tuit.uz/Prezident/27.pdf 的低分辨率扫描文档。在我电脑上的 pdf.js 中看起来还可以i.imgur.com/a75PAoq.png
我相信有解决办法：stackoverflow.com/questions/36330102/…

标签： pdf-generation mozilla pdf.js

【解决方案1】：

您只需更改 pdf 的缩放比例，即在呈现页面时：

pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;
...

这是您必须更改的比例值。然后，生成的渲染图像将适合画布给定的尺寸，例如在 CSS 中。这意味着您可以生成更大的图像，将其放入您之前拥有的容器中，从而有效地提高分辨率。

【讨论】：

【解决方案2】：

web/viewer.js 中有 renderPage 函数，打印分辨率在其中被硬编码为 150 DPI。

function renderPage(activeServiceOnEntry, pdfDocument, pageNumber, size) {
  var scratchCanvas = activeService.scratchCanvas;
  var PRINT_RESOLUTION = 150;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;

要将打印分辨率更改为 300 DPI，只需更改下面的行。

var PRINT_RESOLUTION = 300;

【讨论】：

【解决方案3】：

可能是像素比的问题，我以前经常遇到设备像素比大于1的情况（例如iPhone、iPad等。你可以阅读this question以获得更好的解释。

只需在PDF.js Viewer 上尝试该文件即可。如果它按预期工作，您必须检查 PDF.js 如何在像素比 > 1 here 下工作。库基本上做的是：

canvas.width = viewport.width * window.devicePixelRatio;
canvas.styles.width = viewport.width + 'px'; // Note: The px unit is required here

但您必须检查 PDF.js 的工作原理以获得更好的性能

【讨论】：