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 =＆＃34; https://www.myFilePath/1Mpublic.pdf＆＃34 ;;

SELECT consultant.name, consultant.surname FROM consultor
INNER JOIN participate ON participate.id_consultant = consultant.id
INNER JOIN project ON  project.id = participate.id_project
INNER JOIN cliente ON  client.id = project.id_client
WHERE client.name NOT IN("Juan Perez")

希望它有所帮助！

Answer 2

此代码将帮助您，我的问题是 pdf 没有根据响应速度以清晰的质量呈现。所以我搜索并像这样修改了我的代码。现在它可以根据您想要提供的 div 大小渲染清晰明了的 pdf。 `var loadingTask = pdfjsLib.getDocument("your_pdfurl"); loadingTask.promise.then(function(pdf) { console.log('PDF 加载');

                // Fetch the first page
                var pageNumber = 1;
                pdf.getPage(pageNumber).then(function(page) {
                    console.log('Page loaded');


                   

                    var container = document.getElementById("container") //Container of the body
                    var wrapper = document.getElementById("wrapper");//render your pdf inside a div called wrapper
                    var canvas = document.getElementById('pdf');
                    var context = canvas.getContext('2d');
                    const pageWidthScale = container.clientWidth / page.view[2];
                    const pageHeightScale = container.clientHeight / page.view[3];

                    var scales = { 1: 3.2, 2: 4 },
                    defaultScale = 4,
                    scale = scales[window.devicePixelRatio] || defaultScale;

                    var viewport = page.getViewport({ scale: scale });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    var displayWidth =  Math.min(pageWidthScale, pageHeightScale);;
                    canvas.style.width = `${(viewport.width * displayWidth) / scale}px`;
                    canvas.style.height = `${(viewport.height * displayWidth) / scale}px`;


                    // Render PDF page into canvas context
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);
                    renderTask.promise.then(function() {
                        console.log('Page rendered');
                    });
                });
            }, function(reason) {
                // PDF loading error
                console.error(reason);
            });`

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

2 个答案: