如何将UI和工具栏添加到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

不幸的是，PDF.js软件包维护者决定从他们预先构建的发行版NPM软件包中删除查看器.html，因为：

有人担心最终用户将Firefox PDF Viewer误认为 自定义网站部署，这将为我们增加支持负载。

您可以手动复制此文件夹，但这意味着您还需要手动更新它，这对于现代 Web 应用程序开发来说不太理想。

虽然他们已经为Web开发人员发布了可重用的组件，但没有太多关于如何实际利用这些组件的信息：

我们正在慢慢重构查看器以提供一组可嵌入的 API，因此自定义查看器可以轻松地部署在自定义网站上，也可以 将 UI 自定义的负担转移到网站开发人员身上。看 Web/pdf_viewer 文件和示例位于 https://github.com/mozilla/pdf.js/tree/master/examples/components 和 #5552

我提供的所有示例、文章和第三方包(对于我选择的框架(都在实现它们自己的 UI 功能。

如果有人有更多关于如何构建PDF.js组件的例子，我们有兴趣阅读更多关于它的信息。