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

2019-06-27 16:23:15 阅读：251 来源： 互联网

我想在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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