在 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