Вирішення проблеми з рендерингом PDF у pdf.js: помилка Uncaught (in promise)

6 Березня 2024 в 02:01 28

При роботі з відображенням PDF за допомогою бібліотеки pdf.js може виникнути помилка “Uncaught (in promise) Error: Cannot use the same canvas during multiple render() operations.” Ця проблема зазвичай виникає при спробі відобразити кілька PDF-файлів на одному та тому ж полотні, особливо в динамічному інтерфейсі користувача.

Для вирішення цієї проблеми необхідно забезпечити правильне очищення полотна перед відображенням нового PDF. Нижче наведений HTML- та JavaScript-код:

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 renderPage(pageNumber) {
        clearCanvas(); // Очистити полотно перед відображенням нової сторінки
        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);
            });
        }).catch(function (reason) {
            console.error('Помилка відображення сторінки', reason);
        });
    }
    function clearCanvas() {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
    // Інші функції та обробники подій залишаються без змін
}

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 renderPage(pageNumber) {

clearCanvas(); // Очистити полотно перед відображенням нової сторінки

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

});

}).catch(function (reason) {

console.error('Помилка відображення сторінки', reason);

});

}

function clearCanvas() {

var context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

}

// Інші функції та обробники подій залишаються без змін

}

Забезпечивши очищення полотна перед відображенням нової сторінки, ви можете уникнути виникнення помилки. Додатково переконайтеся, що ви врахували будь-які інші можливі проблеми, що специфічні для ваших вимог до додатку.

Не соромтеся впроваджувати це рішення та повідомляти про будь-які додаткові питання!