CODEWITHSUNDEEP
pdf.js
jamesMcKey
jamesMcKey

Reputation: 491

PDF.js displays PDF documents in really low resolution/ blurry almost. Is this how it is?

I am trying to use PDF.js to view PDF documents. I find the display really low resolutions to the point of being blurry. Is there a fix?

enter image description here

 // 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);
          });

Upvotes: 9

Views: 12506

Answers (3)

Tobisexuell
Tobisexuell

Reputation: 11

In my case the solution was to set the scaling of the monitor to 100% (in the system settings). On Default Plasma set it to 110% and this caused pdf.js to be blurry.

Upvotes: 0

Guilherme Kich
Guilherme Kich

Reputation: 341

There are two things you can do. I tested and somehow it worked, but you will get a bigger memory consumption.

  1. Go to pdf.js and change the parameter MAX_GROUP_SIZE to like 8192 (double it for example). Be sure to have your browser cache disabled while testing.

  2. You can force the getViewport to retrieve the image in better quality but like, I don't know how to say in English, compress it so a smaller size while showing:

    // 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
        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);
    }
);

Hope it helps!

Upvotes: 17

Snehil Jain
Snehil Jain

Reputation: 31

This code will help you, my issue was pdf was not rendering in crisp quality according with the responsiveness. So I searched, and modified my code like this. Now it works for rendering crisp and clear pdf according to the div size you want to give.

var loadingTask = pdfjsLib.getDocument("your_pdfurl");

loadingTask.promise.then(function(pdf) {
    console.log('PDF loaded');

    // 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);
});

Upvotes: 3

Related Questions