在 Canvas PDF JS 中渲染 PDF

Question

我正在尝试在滚动时一一呈现 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>

爪哇脚本：




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);

}

Answer 1

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

Answer 2

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

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

在 Canvas PDF JS 中渲染 PDF

问题描述

2 个解决方案

解决方案1
1 2020-02-28 14:41:29

解决方案2
0 2019-08-25 17:55:50

在 Canvas PDF JS 中渲染 PDF

问题描述

2 个解决方案

解决方案1 1 2020-02-28 14:41:29

解决方案2 0 2019-08-25 17:55:50

解决方案1
1 2020-02-28 14:41:29

解决方案2
0 2019-08-25 17:55:50