Responsive pdf.js preview

Question

I'm trying to update my pdf preview when I resize my window. For now my canvas's size is changing, but the pdf preview is keeping the same size. How can't find a way to do this.

    var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }

function domLoad() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
 
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        var viewport = page.getViewport(myState.zoom);

        var heightRatio = 842 / 595;
        canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
        canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
 
        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
        
    updateCanvas(canvas);
    });
}


document.addEventListener('DOMContentLoaded', function(event) {
     
        pdfjsLib.getDocument('https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf').then((pdf) => {
     
            myState.pdf = pdf;
            render();

        });

        function render() {
            domLoad();
        }
  })


  addEventListener("resize", (event) => {

    domLoad();

  });

  function updateCanvas(canvas) {
    
    var canvasParent = document.getElementById("pdf_container");
    var previousCanvas = canvasParent.querySelector('canvas');
    if(previousCanvas !== null) {
        canvasParent.removeChild(previousCanvas);
    }
    canvasParent.appendChild(canvas);
  }

body { width: 100%; height: 100%; }

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>

<body>
<a id="pdf_container" class="pdf_container" href="https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf">
         </a>
</div>
</body>

I tried to remove the canvas when I'm resizing the window, and add it back with another size for now. The canvas's size is changing but the pdf preview inside won't fit it.

score 0 · Answer 1 · answered Jan 14 '23 at 06:52

Reading : This solution

I managed to fix this, the viewport was the answer. The problem was the name of getViewport (it can also be a setter) :

var viewport = page.getViewport(canvas.width / page.getViewport(myState.zoom).width);

    var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }

function domLoad() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
 
        var canvas = document.createElement('canvas');
        canvas.id = 'pdf_renderer';
        var ctx = canvas.getContext('2d');

        console.log(page);
        var heightRatio = 842 / 595;
        canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
        canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
 
        var viewport = page.getViewport(canvas.width / page.getViewport(myState.zoom).width);
        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
        
    updateCanvas(canvas);
    });
}


document.addEventListener('DOMContentLoaded', function(event) {
     
        pdfjsLib.getDocument('../documents/cv.pdf').then((pdf) => {
     
            myState.pdf = pdf;
            render();

        });

        function render() {
            domLoad();
        }
  })


  addEventListener("resize", (event) => {

    domLoad();

  });

  function updateCanvas(canvas) {
    
    var canvasParent = document.getElementById("pdf_container");
    var previousCanvas = canvasParent.querySelector('canvas');
    if(previousCanvas !== null) {
        canvasParent.removeChild(previousCanvas);
    }
    canvasParent.appendChild(canvas);
  }

Responsive pdf.js preview

1 Answers1