PDF.js 以非常低的分辨率/几乎模糊的方式显示 PDF 文档。这是怎么回事？

Question

我正在尝试使用 PDF.js 查看 PDF 文档。我发现显示器的分辨率非常低，以至于变得模糊。有解决办法吗？

 // URL of PDF document
        var url = "https://www.myFilePath/1Mpublic.pdf";

        // Asynchronous download PDF
        PDFJS.getDocument(url)
          .then(function(pdf) {
            return pdf.getPage(1);
          })
          .then(function(page) {
            // Set scale (zoom) level
            var scale = 1.2;

            // Get viewport (dimensions)
            var viewport = page.getViewport(scale);

            // Get canvas#the-canvas
            var canvas = document.getElementById('the-canvas');

            // Fetch canvas' 2d context
            var context = canvas.getContext('2d');

            // Set dimensions to Canvas
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Prepare object needed by render method
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };

            // Render PDF page
            page.render(renderContext);
          });

Answer 1

你可以做两件事。我测试过，不知何故它有效，但你会得到更大的内存消耗。

1 .转到 pdf.js 并将参数 MAX_GROUP_SIZE 更改为 8192 (例如将其加倍)。确保在测试时禁用浏览器缓存。

您可以强制 getViewport 以更好的质量检索图像，但是像，我不知道用英语怎么说，在显示时将其压缩为较小的尺寸:

//PDF 文档的 URL
var url = " https://www.myFilePath/1Mpublic.pdf ";

    // Asynchronous download PDF
    PDFJS.getDocument(url)
      .then(function(pdf) {
        return pdf.getPage(1);
      })
      .then(function(page) {
        // Set scale (zoom) level
        var scale = 1.2;

        // Get viewport (dimensions)
        var viewport = page.getViewport(scale);

        // Get canvas#the-canvas
        var canvas = document.getElementById('the-canvas');

        // Fetch canvas' 2d context
        var context = canvas.getContext('2d');

        // Set dimensions to Canvas
        var resolution =  2 ; // for example

        canvas.height = resolution*viewport.height; //actual size
        canvas.width = resolution*viewport.width;

       canvas.style.height = viewport.height; //showing size will be smaller size
        canvas.style .width = viewport.width;

        // Prepare object needed by render method
        var renderContext = {
          canvasContext: context,
          viewport: viewport,
          transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
        };

        // Render PDF page
        page.render(renderContext);
      });
enter code here

希望能帮助到你!