So fügen Sie Toolbar Viewer zu PDF.js hinzu

Question

Ich versuche, PDF.js in meinem Projekt zu implementieren, aber es ist schwieriger als erwartet.

Momentan kann ich eine ganze PDF in einem div rendern, aber ich bin nicht in der Lage, den Standard-Toolbar-Viewer zu rendern; Sie können ein Beispiel sehen, was ich Anfang der Demo-Seite wollen: https://mozilla.github.io/pdf.js/web/viewer.html

Mein JS-Code im Moment wie folgt aussieht:

var url = '/filemanager/example.pdf'; 
 
var pdfScale = 1; 
 
PDFJS.workerSrc = '/js/pdfJs/build/pdf.worker.js'; 
 

 
function renderPDF(url, canvasContainer, options) { 
 
    var options = options || { scale: pdfScale }; 
 

 
    function renderPage(page) { 
 
     var viewport = page.getViewport(options.scale); 
 
     var canvas = document.createElement('canvas'); 
 
     var ctx = canvas.getContext('2d'); 
 
     var renderContext = { 
 
      canvasContext: ctx, 
 
      viewport: viewport 
 
     }; 
 

 
     canvas.height = viewport.height; 
 
     canvas.width = viewport.width; 
 
     canvasContainer.appendChild(canvas); 
 

 
     page.render(renderContext); 
 
    } 
 

 
    function renderPages(pdfDoc) { 
 
     for(var num = 1; num <= pdfDoc.numPages; num++) 
 
      pdfDoc.getPage(num).then(renderPage); 
 
    } 
 
    PDFJS.disableWorker = true; 
 
    PDFJS.getDocument(url).then(renderPages); 
 
} 
 

 
renderPDF(url, document.getElementById('the-canvas'));

<div id="the-canvas" class="text-center" style="overflow: auto; max-height: 450px"></div>

So ... wie kann ich der Toolbar-Viewer mit allen Steuerelementen wie Demoseite?

Answer 1

haben Sie einen Blick auf dieses Video: https://www.youtube.com/watch?v=TstpR_gGb-4

Angeblich soll, nachdem Sie die Pdf.js heruntergeladen haben, und haben die pdf im „web“ -Ordner, wird es (mit der Symbolleiste) arbeiten ohne Code erforderlich.