Canvas PDF JS 中的 PDF 渲染答案

【问题标题】：PDF Rendering in Canvas PDF JSCanvas PDF JS 中的 PDF 渲染
【发布时间】：2019-12-28 10:28:37
【问题描述】：

我正在尝试在滚动时一一呈现 pdf 中的页面，就像它们在 PDF JS 的演示中一样。我正在使用 PDF JS。我一次渲染了所有页面，但是加载所有页面需要一些时间。所以基本上这个想法是像PDF Js的演示一样更快地加载pdf。

我分享了下面的代码，我一次渲染了所有页面，但这比预期的要多一点时间。

HTML：

<html>
    <head>
        <title>PDF JS Demo</title>
        <style>
            #holder {
                width: 100%;
                height: 500px;
                overflow: auto;
                background: #333;
                text-align: center;
                border: 1px solid;
                margin-bottom: 25px;
            }
            canvas {
                margin-bottom: 15px;
            }
        </style>
    </head>
<body>

<script src="build/pdf.js"></script>
<script src="build/pdf.worker.js"></script>
<script type="text/javascript" src="build/simple.js"></script>

<div id="holder"></div>

<script type="text/javascript">
reUsableRenderPDF('build/HygieneReport_New.pdf', document.getElementById('holder'));
</script>
</body>
</html>

JAVASCRIPT：




function reUsableRenderPDF(url, canvasContainer, options) {

    var options = options || { zoom: 1.0 };

    function renderPage(page) {
        var viewport = page.getViewport(options.zoom);
        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);
    }

    pdfjsLib.disableWorker = true;
    pdfjsLib.getDocument(url).then(renderPages);

}

【问题讨论】：

标签： javascript pdfjs

【解决方案1】：

您并没有真正提出具体问题。但至于为什么 pdf 可能渲染缓慢，它可能是 pdf 的大小，pdf 中有很多内容或其他一些东西。您也可以尝试使用 cdn 而不是包含构建文件：

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js"></script>

【讨论】：

【解决方案2】：

您应该只渲染一些 pdf 页面，而不是一次渲染所有页面，也就是说，您在第 5 页，您可以渲染第 3 4 和 6 7 页，但要做到这一点，您需要知道当前位置您所在的页面并获取接近当前页码的页面并渲染它们，但是当您滚动到不同的页面时，您需要从 HTML 中删除旧的渲染。

【讨论】：