使用與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初學者。 –

回答

相關問題