mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
signature: fully working app with pdfjs-dist
This commit is contained in:
parent
0f589ec57e
commit
b0a8fd54a8
@ -53,12 +53,12 @@
|
||||
"marked": "^12.0.2",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"mime": "^4.0.0",
|
||||
"pdfjs-dist": "^4.3.136",
|
||||
"swagger-ui": "^4.15.5",
|
||||
"vis-network": "^9.1.0",
|
||||
"vue": "^3.2.37",
|
||||
"vue-i18n": "^9.1.6",
|
||||
"vue-multiselect": "3.0.0-alpha.2",
|
||||
"vue-pdf-embed": "^2.0.4",
|
||||
"vue-toast-notification": "^2.0",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
|
@ -1,26 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<span>
|
||||
<button :disabled="page <= 1" @click="unTurnPage">❮</button>
|
||||
{{ page }} / {{ pageCount }}
|
||||
<button :disabled="page >= pageCount" @click="turnPage">❯</button>
|
||||
</span>
|
||||
<div v-if="pageCount > 1">
|
||||
<button :disabled="page <= 1" @click="unTurnPage">❮</button>
|
||||
{{ page }} / {{ pageCount }}
|
||||
<button :disabled="page >= pageCount" @click="turnPage">❯</button>
|
||||
</div>
|
||||
<!-- <VuePdfEmbed :source="pdfSource" :page="page"/> -->
|
||||
<canvas id="canvas"></canvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, Ref } from "vue";
|
||||
// import VuePdfEmbed from "vue-pdf-embed";
|
||||
// import "vue-pdf-embed/dist/style/index.css";
|
||||
import { SignatureZone } from "../../types";
|
||||
import * as pdfjsLib from "pdfjs-dist";
|
||||
import {
|
||||
PDFDocumentProxy,
|
||||
PDFPageProxy,
|
||||
} from "pdfjs-dist/types/src/display/api";
|
||||
|
||||
// @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 * as PdfWorker from "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;
|
||||
|
||||
@ -29,10 +28,13 @@ import {
|
||||
download_and_decrypt_doc,
|
||||
} from "../StoredObjectButton/helpers";
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
|
||||
|
||||
const page: Ref<number> = ref(1);
|
||||
const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, can be done with pdfjs (https://stackoverflow.com/questions/10253669/how-to-get-the-number-of-pages-of-a-pdf-uploaded-by-user)
|
||||
const pageCount: Ref<number> = ref(0);
|
||||
let userSignatureZones = {} as SignatureZone;
|
||||
let pdfSource: Ref<string> = ref("");
|
||||
let pdf = {} as PDFDocumentProxy;
|
||||
|
||||
const signature = {
|
||||
id: 1,
|
||||
@ -86,31 +88,32 @@ const signature = {
|
||||
|
||||
const urlInfo = build_download_info_link(signature.storedObject.filename);
|
||||
|
||||
const showPdf = async (url: string) => {
|
||||
const mount_pdf = 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);
|
||||
pdf = await loadingTask.promise;
|
||||
pageCount.value = pdf.numPages;
|
||||
await set_page(1);
|
||||
};
|
||||
|
||||
const get_render_context = (pdfPage: PDFPageProxy) => {
|
||||
const scale = 1;
|
||||
const viewport = page.getViewport({ scale });
|
||||
|
||||
// Apply page dimensions to the `<canvas>` element.
|
||||
const viewport = pdfPage.getViewport({ scale });
|
||||
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 = {
|
||||
return {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
await page.render(renderContext);
|
||||
console.log("Page rendered!");
|
||||
};
|
||||
|
||||
const set_page = async (page: number) => {
|
||||
const pdfPage = await pdf.getPage(page);
|
||||
const renderContext = get_render_context(pdfPage);
|
||||
await pdfPage.render(renderContext);
|
||||
};
|
||||
|
||||
async function download_and_open(): Promise<Blob> {
|
||||
let raw;
|
||||
@ -120,12 +123,12 @@ async function download_and_open(): Promise<Blob> {
|
||||
signature.storedObject.keyInfos,
|
||||
new Uint8Array(signature.storedObject.iv)
|
||||
);
|
||||
await showPdf(URL.createObjectURL(raw));
|
||||
init_pdf();
|
||||
} catch (e) {
|
||||
console.error("error while downloading and decrypting document", e);
|
||||
throw e;
|
||||
}
|
||||
await mount_pdf(URL.createObjectURL(raw));
|
||||
init_pdf();
|
||||
return raw;
|
||||
}
|
||||
|
||||
@ -136,7 +139,7 @@ const init_pdf = () => {
|
||||
(e: PointerEvent) => canvas_click(e),
|
||||
false
|
||||
);
|
||||
setTimeout(() => add_zones(), 200);
|
||||
setTimeout(() => add_zones(page.value), 800);
|
||||
};
|
||||
|
||||
const canvas_click = (e: PointerEvent) => {
|
||||
@ -145,14 +148,16 @@ const canvas_click = (e: PointerEvent) => {
|
||||
userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
|
||||
};
|
||||
|
||||
const turnPage = () => {
|
||||
const turnPage = async () => {
|
||||
page.value = page.value + 1;
|
||||
setTimeout(() => add_zones(), 200);
|
||||
await set_page(page.value);
|
||||
setTimeout(() => add_zones(page.value), 200);
|
||||
};
|
||||
|
||||
const unTurnPage = () => {
|
||||
const unTurnPage = async () => {
|
||||
page.value = page.value - 1;
|
||||
setTimeout(() => add_zones(), 200);
|
||||
await set_page(page.value);
|
||||
setTimeout(() => add_zones(page.value), 200);
|
||||
};
|
||||
|
||||
const draw_zone = (
|
||||
@ -171,20 +176,20 @@ const draw_zone = (
|
||||
);
|
||||
};
|
||||
|
||||
const add_zones = () => {
|
||||
const add_zones = (page: number) => {
|
||||
const canvas = document.querySelectorAll("canvas")[0];
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.fillStyle = "green";
|
||||
signature.zones.map((z) => {
|
||||
if (z.page === page.value) {
|
||||
draw_zone(z, ctx, canvas.width, canvas.height);
|
||||
}
|
||||
});
|
||||
signature.zones
|
||||
.filter((z) => z.page === page)
|
||||
.map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
download_and_open();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
Loading…
x
Reference in New Issue
Block a user