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

signature: POC of showing PDF with pdfjs-dist

Browse Source
This commit is contained in:
nobohan 2024-06-21 13:44:41 +02:00
parent 2d4fc45a0c
commit 0f589ec57e
1 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,16 +6,23 @@
<button :disabled="page >= pageCount" @click="turnPage">❯</button> <button :disabled="page >= pageCount" @click="turnPage">❯</button>
</span> </span>
</div> </div>
<VuePdfEmbed :source="pdfSource" :page="page"/> <!-- <VuePdfEmbed :source="pdfSource" :page="page"/> -->
<!-- <canvas id="canvas"></canvas> --> <canvas id="canvas"></canvas>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, Ref } from "vue"; import { ref, Ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed"; // import VuePdfEmbed from "vue-pdf-embed";
import "vue-pdf-embed/dist/style/index.css"; // import "vue-pdf-embed/dist/style/index.css";
import { SignatureZone } from "../../types"; import { SignatureZone } from "../../types";
//import * as pdfjsLib from "pdfjs-dist"; import * as pdfjsLib from "pdfjs-dist";
// @ts-ignore
import * as PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs';
console.log(PdfWorker) // incredible but this is needed
// import { PdfWorker } from 'pdfjs-dist/build/pdf.worker.mjs'
// pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker;
import { import {
build_download_info_link, build_download_info_link,
@ -27,8 +34,6 @@ const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, ca
let userSignatureZones = {} as SignatureZone; let userSignatureZones = {} as SignatureZone;
let pdfSource: Ref<string> = ref(""); let pdfSource: Ref<string> = ref("");
//console.log('signature', window.signature);
const signature = { const signature = {
id: 1, id: 1,
// storedObject: { // storedObject: {
@ -81,6 +86,32 @@ const signature = {
const urlInfo = build_download_info_link(signature.storedObject.filename); const urlInfo = build_download_info_link(signature.storedObject.filename);
const showPdf = async (url: string) => {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
// Load information from the first page.
const page = await pdf.getPage(1);
const scale = 1;
const viewport = page.getViewport({ scale });
// Apply page dimensions to the `<canvas>` element.
const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
const context = canvas.getContext("2d") as CanvasRenderingContext2D;
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render the page into the `<canvas>` element.
const renderContext = {
canvasContext: context,
viewport: viewport,
};
await page.render(renderContext);
console.log("Page rendered!");
};
async function download_and_open(): Promise<Blob> { async function download_and_open(): Promise<Blob> {
let raw; let raw;
try { try {
@ -89,8 +120,8 @@ async function download_and_open(): Promise<Blob> {
signature.storedObject.keyInfos, signature.storedObject.keyInfos,
new Uint8Array(signature.storedObject.iv) new Uint8Array(signature.storedObject.iv)
); );
pdfSource.value = URL.createObjectURL(raw); await showPdf(URL.createObjectURL(raw));
setTimeout(() => init_pdf(), 2000); //TODO gestion async init_pdf();
} catch (e) { } catch (e) {
console.error("error while downloading and decrypting document", e); console.error("error while downloading and decrypting document", e);
throw e; throw e;
@ -99,13 +130,13 @@ async function download_and_open(): Promise<Blob> {
} }
const init_pdf = () => { const init_pdf = () => {
const canvas = document.querySelectorAll("canvas")[0]; const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
canvas.addEventListener( canvas.addEventListener(
"pointerup", "pointerup",
(e: PointerEvent) => canvas_click(e), (e: PointerEvent) => canvas_click(e),
false false
); );
add_zones(); setTimeout(() => add_zones(), 200);
}; };
const canvas_click = (e: PointerEvent) => { const canvas_click = (e: PointerEvent) => {