首页 > 编程语言> > javascript – 使用多个画布和pdf.js

javascript – 使用多个画布和pdf.js

2019-06-27 16:23:15 作者：互联网

我想在html第4页画布中显示,每个画布对应一个pdf文件的页面.
我成功地在1个画布中显示1页,但是当我想显示4时它不起作用：没有显示任何页面.

我做错了什么？

编辑：
我试图解决承诺的问题(我编辑了我的代码),但现在我又得到了一个错误：错误：无效的页面请求pdf.js：2687：31这里是相应的代码(2697是返回的行)：

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

解决方法:

你正在使用promises,所以你的.then分支函数的所有调用都是在你的for循环结束后完成的,即i等于3(最后一次迭代值).结果,您将填充相同的画布3次.顺便说一句,看看你的for循环.它只循环3次.您可能希望将循环条件更改为i <= 4. 您应该在循环之前调用PDFJS.getDocument,并在promise中调用此循环.

标签：javascript,html,pdf-js
来源： https://codeday.me/bug/20190627/1306410.html