使用多个 canvas 和 pdf.js

Question

我想在html第4页canvas中显示，每页对应一个pdf文件的一页。我成功地在 1 canvas 中显示了 1 页，但是当我想显示第 4 页时它不起作用：显示了 none 页。

我做错了什么？

编辑： 我试图解决承诺的问题（我编辑了我的代码）但现在我得到了另一个错误：Error: Invalid page request pdf.js:2687:31 这是相应的代码（2697 是 return 的行）：

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

这是我的代码：

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>

<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 文件 (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);
    });
}

Answer 1

您正在使用承诺，因此您对 .then 分支中的函数的所有调用都已完成在您的 for 循环完成后，即使用 i 等于 3（最后一次迭代值）。结果，您填充了相同的 canvas 3 次。顺便说一下，看看你的 for 循环。它只循环 3 次。您可能希望将循环条件更改为 i<=4.

您应该在循环之前调用 PDFJS.getDocument，并从 promise 中调用此循环。

Answer 2

我终于解决了，这里是解决方案：

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>

使用多个 canvas 和 pdf.js

Using multiple canvas with pdf.js

javascript

html

pdf.js