如何将工具栏查看器添加到PDF.js

Question

我想在我的项目上实现PDF.js，但它比预期的要困难。

目前，我可以在div中渲染整个PDF，但我无法呈现标准工具栏查看器;你可以看到什么，我想在此演示页面的顶部的例子：https://mozilla.github.io/pdf.js/web/viewer.html

我的JS代码看起来像这样的时刻：

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>

所以...我怎么能带演示页面等所有控件的工具栏查看器？

Answer 1

请看看这个视频：无需任何代码https://www.youtube.com/watch?v=TstpR_gGb-4

据说，你已经下载了pdf.js后，并在“网络”文件夹中的PDF，它会工作（与工具栏）需要。