Wie man eine pdf-Datei mit pdf.js rendert?

Ich habe eine HTML-Datei mit Inhalt wie unten index.htmlWie man eine pdf-Datei mit pdf.js rendert?

<html> 
    <head> 
    <script type="text/javascript" src="./pdf.js"></script> 
    <script type="text/javascript" src="./hello.js"></script> 
    </head> 
    <body> 
    <canvas id="the-canvas" style="border:1px solid black;"/> 
    </body> 
</html>

hello.js mit Inhalt

PDFJS.disableWorker = true; 
var pf = PDFJS.getDocument('./helloworld.pdf') 
pf.then(function(pdf) { 
    pdf.getPage(1).then(function(page) { 
    var scale = 1.5; 
    var viewport = page.getViewport(scale); 

    // 
    // Prepare canvas using PDF page dimensions 
    // 
    var canvas = document.getElementById('the-canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.height = viewport.height; 
    canvas.width = viewport.width; 

    // 
    // Render PDF page into canvas context 
    // 
    var renderContext = { 
     canvasContext: context, 
     viewport: viewport 
    }; 
    page.render(renderContext); 
    }); 
});

Aber das pdf nicht korrekt angezeigt wird, wenn ich den Browser zeigen zu index.html. Ich möchte, dass der Benutzer in der Lage ist, eine PDF-Datei auf seinem Computer auszuwählen und diese im Browserfenster anzuzeigen.

Quelle

2014-03-26 badanomaly

Sie können ein Problem haben das lokale Dateisystem zugreifen. Wie bedienen Sie/greifen Sie darauf zu? 'http:'? 'Datei:'? – Joe

Ich nehme auch an, dass ein zusätzlicher Backtick in Zeile 3 ein Tippfehler ist. – Joe

@Joe Ich greife darauf über Datei zu: Ich weiß nicht, warum es wichtig wäre, ob ich über http: oder Datei darauf zugreife: immerhin ist es JavaScript und sollte so oder so funktionieren. – badanomaly

Es sieht so aus, als ob Sie dieses Problem bei der Verwendung des Protokolls file: statt http: oder https: treffen. Zwischen den verschiedenen Protokollen spielen unterschiedliche Sicherheitsaspekte eine Rolle.

Hier a blog post about using XMLHttpRequest with local files und ein discussion on a Mozilla Firefox ticket.

Es gibt ein paar Tickets (einschließlich this one und this one) auf dem Projekt, die möglicherweise Zeiger bereitstellen. Ein Kommentar von this ticket sagt:

Typische pdf.js Use Cases erfordert einen Webserver und moderne HTML5-Browser verwenden.

Ich schlage vor, Ihr Problem zu beheben Sie nur diesen Server über eine Web führen Sie das http-Protokoll zu verwenden. Nginx und Apache sind einfach zu installieren und einzurichten. Wenn das nicht funktioniert, generieren Sie pdf.js und pdf.worker.js für Ihr System mit this, wenn der obige Schritt nicht funktioniert.

Quelle

2014-03-26 14:14:08 Joe

erstellt einen Knotenserver, legen Sie die helloworld.pdf und Pdf.js in statischen Dateien und diente index.html (http://paste.ubuntu.com/7157553/), noch keine pdf in der gedienten Datei. http: // localhost: 3000/javascripts/helloworld.pdf aber zeigt die pdf-Bedeutung, dass es verfügbar ist. Vielleicht mache ich hier etwas falsch. – badanomaly

Haben Sie in Ihrer Konsole nach Fehlern gesucht? – Joe

anders als 404 für /javascripts/pdf.worker.js (http://paste.ubuntu.com/7157625/) kein anderer Fehler in der Konsole. Auch das Script-Tag angefügt ich index.html nicht wissen, wie. Ich glaube nicht, einen Server zu betreiben ist die Lösung, denn wenn ich den pdf.js Repo von Github klonen und öffnen Sie das Helloworld Beispiel im Browser (https://github.com/mozilla/pdf.js/tree/master/examples/Helloworld) es funktioniert gut. – badanomaly

Wie man eine pdf-Datei mit pdf.js rendert?

Antwort

Verwandte Themen