110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
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()
|