Verwenden mehrerer Leinwand mit pdf.js

Ich möchte in einer HTML-Seite 4 Leinwand anzeigen und jeder von ihnen entsprechen einer Seite einer PDF-Datei. Es ist mir gelungen, 1 Seite in 1 Leinwand anzuzeigen, aber wenn ich die 4 anzeigen möchte, funktioniert es nicht: keine der Seiten wird angezeigt.Verwenden mehrerer Leinwand mit pdf.js

Was mache ich falsch?

EDIT: ich das Problem der Verheißung zu lösen versucht (ich bearbeiten meinen Code), aber jetzt habe ich einen anderen Fehler: Error: Invalid page request pdf.js:2687:31 und hier ist der entsprechende Code (2697 die Linie der Rückkehr ist):

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

Hier ist mein Code:

html-Datei:

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

Quelle

2017-08-20 Yohann Lereclus

Bitte beschreiben "funktioniert nicht" ausführlicher. – Thevs

Sehen Sie, ob https://Stackoverflow.com/a/44548566/1765767 hilft – async5

Sie verspricht verwenden, so dass alle Ihre Anrufe an die Funktion in .then Zweig fertig sind nach Ihre for Schleife beendet ist, dh mit i gleich 3 (letzter Iterationswert). Als Ergebnis füllen Sie die gleichen canvas 3 Mal. Achte übrigens auf deinen for Loop. Es läuft nur 3 mal. Möglicherweise möchten Sie die Schleifenbedingung in i<=4 ändern.

Sie sollten PDFJS.getDocument vor der Schleife aufrufen und diese Schleife innerhalb von Versprechen aufrufen.

Quelle

2017-08-21 04:24:38 Thevs

Hallo Thevs, könnten Sie bitte etwas Code posten? Danke dir ;-) (eine volle '.js' Datei wäre großartig). – Colas

ich es endlich gelöst, hier ist die Lösung:

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>

Quelle

2017-08-22 14:53:14

Hat meine Antwort geholfen? Markieren Sie meine Antwort stattdessen als Lösung. – Thevs

@Thevs Ja, natürlich, ich kannte das Versprechen-Konzept nicht, ich bin ein Anfänger in Javascript. –

Verwenden mehrerer Leinwand mit pdf.js

Antwort

Verwandte Themen