CODEWITHSUNDEEP
javascripthtmlpdf.js
Yohann L.
Yohann L.

Reputation: 1451

Using multiple canvas with pdf.js

I would like to display in a html page 4 canvas and each of them correspond to a page of a pdf file. I succeed to display 1 page in 1 canvas, but when I want to display the 4 it doesn't work : none of the pages are displayed.

What I'm doing wrong ?

EDIT : I tried to solve the problem of the promise (I edited my code) but now I got another error : Error: Invalid page request pdf.js:2687:31 and here is the corresponding code (2697 is the line of the return) :

getPage: function WorkerTransport_getPage(pageNumber, capability) {
  if (pageNumber <= 0 || pageNumber > this.numPages ||
      (pageNumber|0) !== pageNumber) {
    return Promise.reject(new Error('Invalid page request'));
  }

Here is my code :

html file :

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="PDF Viewer"/>
    <title>My page</title>
</head>

<body>

<body>
    <canvas id="canvas1" width="300" height="300"></canvas>

    <canvas id="canvas2" width="300" height="300"></canvas>

    <canvas id="canvas3" width="300" height="300"></canvas>

    <canvas id="canvas4" width="300" height="300"></canvas>

    <script src="/assets/js/pdf.js"></script>
    <script src="/assets/js/pdf.worker.js"></script>
    <script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>

Javascript file (pdf.latex.main.js) :

PDFJS.disableStream = true;
var pdfFile;

PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
    pdfFile = pdf;

    for(var i = 1; i < 4; i++) {
        var canvas = document.getElementById('canvas'+i);
        var context = canvas.getContext('2d');
        PDFJS.disableStream = true;

        openPage(pdf, i, context);
    }
});

function openPage(pdfFile, pageNumber, context) {
    var scale = 5;
    pdfFile.getPage(pageNumber).then(function (page) {
        viewport = page.getViewport(scale);
        // reference canvas via context
        var canvas = context.canvas;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        wrapper.style.width = Math.floor(viewport.width / scale) + 'pt';
        wrapper.style.height = Math.floor(viewport.height / scale) + 'pt';
        var renderContext = {
            canvasContext: context
            , viewport: viewport
        };
        page.render(renderContext);
    });
}

Upvotes: 6

Views: 7864

Answers (2)

Yohann L.
Yohann L.

Reputation: 1451

I finally solved it, here is the solution :

pdf.latex.main.js

var pdfFile;

PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
    pdfFile = pdf;

    for(var i = 1; i <= 4; i++) {
        var canvas = document.getElementById('canvas'+i);
        var context = canvas.getContext('2d');
        PDFJS.disableStream = true;
        openPage(pdf, i, context);
    }
});

function openPage(pdfFile, pageNumber, context) {
    var scale = 5;
    pdfFile.getPage(pageNumber).then(function (page) {
        viewport = page.getViewport(scale);
        // reference canvas via context
        var canvas = context.canvas;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        canvas.style.width = "50%";
        canvas.style.height = "50%";
        var renderContext = {
            canvasContext: context
            , viewport: viewport
        };
        page.render(renderContext);
    });
}

index.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="PDF Viewer" />
    <title>My page</title>
</head>
<body>
    <form action="pdf_latex_test.php">
        <input type="submit" value="execute" /> </form>
</body>

<body>
    <canvas id="canvas1" width="300" height="300"></canvas>
    <canvas id="canvas2" width="300" height="300"></canvas>
    <canvas id="canvas3" width="300" height="300"></canvas>
    <canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>

Upvotes: 2

Thevs
Thevs

Reputation: 3253

You are using promises, so all your calls to the function in .then branch are done after your for loop is finished, i.e. with i equal to 3 (last iteration value). As a result, you're filling the same canvas 3 times. By the way, take a look at your for loop. It loops only 3 times. You may want to change loop condition to i<=4.

You should call PDFJS.getDocument before the loop, and call this loop from within promise.

Upvotes: 7

Related Questions