使用与pdf.js

多个帆布我想在一个HTML页面4画布上显示他们每个人对应一个pdf文件的页面。我成功地在1个画布中显示1页，但是当我想显示4时它不起作用：没有显示任何页面。使用与pdf.js

我在做什么错了？

编辑： 我试图解决的承诺的问题（我编辑的代码），但现在我得到了另一个错误：Error: Invalid page request 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>

JA vascript文件（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); 
    }); 
}

来源

2017-08-20 Yohann Lereclus

请介绍 “不工作”以更详细的方式。 – Thevs

看看https://stackoverflow.com/a/44548566/1765767帮助 – async5

您正在使用的承诺，所以在.then分支上的所有调用该函数完成后您的for循环结束后，即与i等于3（上次迭代值）。因此，你填充3次相同的canvas。顺便说一句，看看你的for循环。它只循环3次。您可能想要将循环条件更改为i<=4。

你应该在循环之前调用PDFJS.getDocument，从承诺中调用这个循环。

来源

2017-08-21 04:24:38 Thevs

嗨Thevs，你可以发布一些代码吗？谢谢;-)（完整的'.js'文件会很棒）。 – Colas

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

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>

来源

2017-08-22 14:53:14

我的回答有帮助吗？所以请将我的答案标记为解决方案。 – Thevs

@Thevs当然，我不知道承诺的概念，我是一个JavaScript初学者。 –

回答

相关问题