4

我正在尝试在我的项目中实现 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>

那么......我怎样才能使用演示页面等所有控件的工具栏查看器？

4

2 回答 2

3

不幸的是，PDF.js 包维护者决定从他们预先构建的分发 NPM 包中删除 viewer.html，因为：

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

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

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

我们正在慢慢重构查看器以提供一组可嵌入的 API，因此自定义查看器可以轻松部署在自定义网站上，同时也减轻了网站开发人员 UI 定制的负担。请参阅https://github.com/mozilla/pdf.js/tree/master/examples/components和 #5552上的 web/pdf_viewer 文件和示例

我获得的所有示例、文章和 3rd 方包（对于我选择的框架）都在实现它们自己的 UI 功能。

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

于 2020-10-23T17:30:02.033 回答
-1

请观看此视频：https ://www.youtube.com/watch?v=TstpR_gGb-4

据说，在您下载 pdf.js 并将 pdf 放在“web”文件夹中之后，它无需任何代码即可工作（使用工具栏）。

于 2017-08-08T08:49:12.607 回答