Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-02 14:07:43 +00:00
Code Issues Actions Projects Releases Wiki Activity

Signature: multi page viewer - WIP

Browse Source
This commit is contained in:
nobohan 2024-09-04 11:26:08 +02:00
parent abf20b0cf2
commit bf61324c1d
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
View File

@ -75,12 +75,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 text-center"> <div v-if="multiPage" class="col-12 text-center">
<canvas class="m-auto" id="canvas"></canvas> <canvas
v-for="p in pageCount"
:key="p"
class="m-auto"
:id="`canvas-${p}`"
></canvas>
</div>
<div v-else class="col-12 text-center">
<canvas class="m-auto" :id="canvas"></canvas>
</div> </div>
<div class="col-12 p-4" id="action-buttons" v-if="signedState !== 'signed'"> <div class="col-12 p-4" id="action-buttons" v-if="signedState !== 'signed'">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-12 d-flex justify-content-end"> <div class="col-12 d-flex justify-content-end">
<div class="col-4 col-xl-3 gap-2 d-grid"> <div class="col-4 col-xl-3 gap-2 d-grid">
@ -171,6 +178,7 @@ import {
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs"; pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
const multiPage: Ref<boolean> = ref(true);
const modalOpen: Ref<boolean> = ref(false); const modalOpen: Ref<boolean> = ref(false);
const loading: Ref<boolean> = ref(false); const loading: Ref<boolean> = ref(false);
const adding: Ref<boolean> = ref(false); const adding: Ref<boolean> = ref(false);
@ -198,13 +206,24 @@ const mountPdf = async (url: string) => {
const loadingTask = pdfjsLib.getDocument(url); const loadingTask = pdfjsLib.getDocument(url);
pdf = await loadingTask.promise; pdf = await loadingTask.promise;
pageCount.value = pdf.numPages; pageCount.value = pdf.numPages;
await setPage(1); if (multiPage.value) {
await setAllPages();
} else {
await setPage(1);
}
}; };
const getRenderContext = (pdfPage: PDFPageProxy) => { const getRenderContext = (pdfPage: PDFPageProxy) => {
const scale = 1; const scale = 1;
const viewport = pdfPage.getViewport({ scale }); const viewport = pdfPage.getViewport({ scale });
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement; let canvas;
if (multiPage.value) {
canvas = document.getElementById(
`canvas-${pdfPage.pageNumber}`
) as HTMLCanvasElement;
} else {
canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
}
const context = canvas.getContext("2d") as CanvasRenderingContext2D; const context = canvas.getContext("2d") as CanvasRenderingContext2D;
canvas.height = viewport.height; canvas.height = viewport.height;
canvas.width = viewport.width; canvas.width = viewport.width;
@ -215,6 +234,9 @@ const getRenderContext = (pdfPage: PDFPageProxy) => {
}; };
}; };
const setAllPages = async () =>
Array.from(Array(pageCount.value).keys()).map((p) => setPage(p + 1));
const setPage = async (page: number) => { const setPage = async (page: number) => {
const pdfPage = await pdf.getPage(page); const pdfPage = await pdf.getPage(page);
const renderContext = getRenderContext(pdfPage); const renderContext = getRenderContext(pdfPage);
@ -515,7 +537,7 @@ downloadAndOpen();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#canvas { canvas {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
} }
div#action-buttons { div#action-buttons {