Using multiple canvas with pdf.js

Question

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

Please describe "doesn't work" in more detailed way. – Thevs Aug 21 '17 at 04:08 — Thevs, Aug 21 '17 at 04:08
See if https://stackoverflow.com/a/44548566/1765767 helps – async5 Aug 21 '17 at 12:48 — async5, Aug 21 '17 at 12:48

score 6 · Answer 1 · answered Aug 21 '17 at 04:24

6

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.

answered Aug 21 '17 at 04:24

Thevs

3,189
2
20
32

Hi Thevs, could you post some code please? Thank you ;-) (a full `.js` file would be great). – Colas Aug 22 '17 at 09:47

score -1 · Accepted Answer · answered Aug 22 '17 at 14:53

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>

Did my answer helped? So mark my answer as solution instead. — Thevs, Aug 23 '17 at 10:30
@Thevs Yes of course, I didn't know the promises concept, I'm a beginner in javascript. — Yohann L., Aug 23 '17 at 11:52

Using multiple canvas with pdf.js

2 Answers2