使用 pdf.js 进行 PDF 渲染提供未捕获（承诺）错误：在多个 render() 操作期间无法使用相同的画布

Question

我使用 Flask、HTML 和 JS 代码创建了一个 UI。 UI 中有一个元素列表；每个元素都有自己的按钮，允许在同一画布中渲染不同的 PDF。 问题是，当我打开第二个或第三个 PDF 并用鼠标滚动 PDF 页面时，会显示第一个 PDF 的页面。 我尝试遵循第一个问题和第二个问题中的所有建议，但没有任何改变。

这是我的html代码：

<div class="col-lg-6" id="col-preview">
    {% if data_to_render %} <h5>Preview</h5> {% endif %}
    <canvas id="pdfCanvas"></canvas>
</div>

这是我的 js 脚本：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.querySelectorAll('.btn-secondary');
    buttons.forEach(function (button) {
      button.addEventListener('click', function () {
        var pdfUrl = button.getAttribute('data-pdf-url');
        var chunk = button.getAttribute('data-chunk');
        renderPdf(pdfUrl, 'pdfCanvas', chunk);
      });
    });
  });

function renderPdf(url, containerId, chunk) {
    var canvas = document.getElementById(containerId);
    var pdfDoc = null;
    var currentPage = 1;
    var heightRatio = window.innerHeight/953;
    var widthRatio = window.innerWidth/1920;
    var scale = Math.min(heightRatio, widthRatio);

    function getCanvasTopLeftCoordinates(canvas) {                
        if (canvas) {
            const rect = canvas.getBoundingClientRect();
            const left = rect.left;
            const top = rect.top;

            return { left, top };
        } else {
            return null; // Il canvas non è stato trovato
        }
    }
    
    // This function does not work well when using a smaller screen (to fix)
    function renderHighlightChunk(page, chunk, maxY) {
        const canvasCoordinates = getCanvasTopLeftCoordinates(canvas);
        var lowerCaseChunk = chunk.toLowerCase();

        page.getTextContent().then(function (textContent) {
            const textItems = textContent.items;

            textItems.forEach(function (textItem) {
                const text = textItem.str;
                var lowerCaseText = text.toLowerCase();
                if (lowerCaseChunk.includes(lowerCaseText)) {

                    posX = (textItem.transform[4] + canvasCoordinates.left) * scale;
                    posY = (maxY - textItem.transform[5] - textItem.transform[0] + canvasCoordinates.top + window.scrollY) * scale;

                    const highlight = document.createElement('div');
                    highlight.className = 'highlight';
                    highlight.style.position = 'absolute';
                    highlight.style.left = posX + 'px';
                    highlight.style.top = posY + 'px';
                    highlight.style.width = textItem.width * scale + 'px';
                    highlight.style.height = textItem.height * scale + 'px';
                    highlight.style.backgroundColor = 'yellow';
                    highlight.style.opacity = '0.5';
                    document.body.appendChild(highlight);
                    }
            });
        });
    };

    function clearHighlights() {
        // Trova tutti i div di evidenziazione e rimuovili
        const highlights = document.querySelectorAll('.highlight');
        highlights.forEach(function (highlight) {
            highlight.parentNode.removeChild(highlight);
        });
    }

    var renderingInProgress = false;

    function renderPage(pageNumber) {
        if (renderingInProgress) {
            return;
        }
        renderingInProgress = true;

        clearHighlights();

        pdfDoc.getPage(pageNumber).then(function (page) {
            var viewport = page.getViewport({ scale: scale });

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var context = canvas.getContext('2d');            
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            page.render(renderContext).promise.then(function () {
                renderHighlightChunk(page, chunk, canvas.height);
                renderingInProgress = false;
            });

        }).catch(function (reason) {
            console.error('Errore durante il rendering della pagina', reason);
            renderingInProgress = false;
        });
    }

    function clearCanvas() {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    pdfjsLib.getDocument(url).promise.then(function (pdf) {
        pdfDoc = pdf;
        clearCanvas();
        renderPage(currentPage);

        var isMouseOverCanvas = false;

        canvas.addEventListener('mouseenter', function () {
            isMouseOverCanvas = true;
        });
        
        canvas.addEventListener('mouseleave', function () {
            isMouseOverCanvas = false;
        });

        canvas.addEventListener('wheel', function (e) {
            if (!isMouseOverCanvas) {
                return;
            }

            e.preventDefault();
            if (e.deltaY < 0 && currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
            } else if (e.deltaY > 0 && currentPage < pdfDoc.numPages) {
                currentPage++;
                renderPage(currentPage);
            }
        });

    }).catch(function (reason) {
        console.error('Errore durante il caricamento del PDF', reason);
    });
}

任何其他建议都会很棒。预先感谢。

Answer 1

我修改了代码如下，它可以工作：

var pdfDoc;

function cancelRendering() {
    if (pdfDoc) {
        pdfDoc.cleanup();
    }
}

function renderPdf(url, containerId, chunk) {
    cancelRendering();