pdf-editor/assets/scripts/main.js

const pdfFileField = document.getElementById('pdfFile')
const pdfModal = document.getElementById('pdfModal')
const pdfModalLabel = document.getElementById('pdfModalLabel')
const pdfModalContent = document.getElementById('pdfModalContent')

// FILE

function pdfFileGetName() {
    return pdfFileField.files[0].name
}

function pdfFileClear() {
    pdfFileField.value = ''
}

async function pdfFileToBlob() {
    return new Promise((resolve) => {
        const fr = new FileReader()
        const file = pdfFileField.files[0]
        fr.readAsArrayBuffer(file)
        fr.onload = function() {
            const blob = new Blob([fr.result])
            resolve(blob)
        }
    })
}

// MODAL

function pdfModalShow() {
    pdfModalLabelUpdate();
    pdfModalContentclear()
    new bootstrap.Modal('#pdfModal').show()
    pdfModalContentLoad()
}

function pdfModalContentclear() {
    pdfModalContent.innerHTML = ''
}

async function pdfModalContentLoad() {
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
    const pdfBlob = await pdfFileToBlob()
    let url = await URL.createObjectURL(pdfBlob)
    let loadingTask = pdfjsLib.getDocument(url)
    loadingTask.promise.then(function(pdf) {
        for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
            let pageIndex = pageNumber - 1;
            pdfModalContent.insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm canvas-pdf"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>');
        }
        
        for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
            pdf.getPage(pageNumber).then(function(page) {
                let pageIndex = page.pageNumber - 1;
                

                console.log('Page loaded');
                
                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});
            
                // Prepare canvas using PDF page dimensions
                var canvas = document.getElementById('canvas-pdf-' + pageIndex);
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
            
                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport,
                };
                var renderTask = page.render(renderContext);
                renderTask.promise.then(function () {
                    console.log('Page rendered');
                });
            });
        }
    }, function (reason) {
        // PDF loading error
        console.error(reason);
    })

    return loadingTask;
}

function pdfModalLabelUpdate() {
    pdfModalLabel.innerText = pdfFileGetName()
}

// START

async function start() {
    pdfFileField.addEventListener('change', async function() {
        pdfModalShow()
    })

    pdfModal.addEventListener('hidden.bs.modal', () => {
        pdfFileClear()
    })


    window.addEventListener('load', function () {
        pdfModalShow()
    })
}

start()