Tweak additional files to integrate decryption and clean up js

src/main/resources/static/js/pages/pdf-to-csv.js

@@ -0,0 +1,138 @@
+let pdfCanvas = document.getElementById('cropPdfCanvas');
+let overlayCanvas = document.getElementById('overlayCanvas');
+let canvasesContainer = document.getElementById('canvasesContainer');
+canvasesContainer.style.display = 'none';
+// let paginationBtnContainer = ;
+
+let context = pdfCanvas.getContext('2d');
+let overlayContext = overlayCanvas.getContext('2d');
+
+let btn1Object = document.getElementById('previous-page-btn');
+let btn2Object = document.getElementById('next-page-btn');
+overlayCanvas.width = pdfCanvas.width;
+overlayCanvas.height = pdfCanvas.height;
+
+let fileInput = document.getElementById('fileInput-input');
+
+let file;
+
+let pdfDoc = null;
+let pageId = document.getElementById('pageId');
+let currentPage = 1;
+let totalPages = 0;
+
+let startX = 0;
+let startY = 0;
+let rectWidth = 0;
+let rectHeight = 0;
+
+let timeId = null; // timeout id for resizing canvases event
+
+btn1Object.addEventListener('click', function (e) {
+  if (currentPage !== 1) {
+    currentPage = currentPage - 1;
+    pageId.value = currentPage;
+
+    if (file.type === 'application/pdf') {
+      let reader = new FileReader();
+      reader.onload = function (ev) {
+        let typedArray = new Uint8Array(reader.result);
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+        pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
+          pdfDoc = pdf;
+          totalPages = pdf.numPages;
+          renderPage(currentPage);
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  }
+});
+
+btn2Object.addEventListener('click', function (e) {
+  if (currentPage !== totalPages) {
+    currentPage = currentPage + 1;
+    pageId.value = currentPage;
+
+    if (file.type === 'application/pdf') {
+      let reader = new FileReader();
+      reader.onload = function (ev) {
+        let typedArray = new Uint8Array(reader.result);
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+        pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
+          pdfDoc = pdf;
+          totalPages = pdf.numPages;
+          renderPage(currentPage);
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  }
+});
+
+function renderPageFromFile(file) {
+  if (file.type === 'application/pdf') {
+    let reader = new FileReader();
+    reader.onload = function (ev) {
+      let typedArray = new Uint8Array(reader.result);
+      pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+      pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
+        pdfDoc = pdf;
+        totalPages = pdf.numPages;
+        renderPage(currentPage);
+      });
+      pageId.value = currentPage;
+    };
+    reader.readAsArrayBuffer(file);
+    document.getElementById('pagination-button-container').style.display = 'flex';
+    document.getElementById('instruction-text').style.display = 'block';
+  }
+}
+
+window.addEventListener('resize', function () {
+  clearTimeout(timeId);
+  timeId = setTimeout(function () {
+    if (fileInput.files.length == 0) return;
+    let canvasesContainer = document.getElementById('canvasesContainer');
+    let containerRect = canvasesContainer.getBoundingClientRect();
+
+    context.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
+
+    overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+
+    pdfCanvas.width = containerRect.width;
+    pdfCanvas.height = containerRect.height;
+
+    overlayCanvas.width = containerRect.width;
+    overlayCanvas.height = containerRect.height;
+
+    let file = fileInput.files[0];
+    renderPageFromFile(file);
+  }, 1000);
+});
+
+fileInput.addEventListener('change', function (e) {
+  fileInput.addEventListener('file-input-change', async (e) => {
+    const {allFiles} = e.detail;
+    if (allFiles && allFiles.length > 0) {
+      canvasesContainer.style.display = 'block'; // set for visual purposes
+      file = e.target.files[0];
+      renderPageFromFile(file);
+    }
+  });
+});
+
+function renderPage(pageNumber) {
+  pdfDoc.getPage(pageNumber).then(function (page) {
+    let viewport = page.getViewport({scale: 1.0});
+    pdfCanvas.width = viewport.width;
+    pdfCanvas.height = viewport.height;
+
+    overlayCanvas.width = viewport.width; // Match overlay canvas size with PDF canvas
+    overlayCanvas.height = viewport.height;
+
+    let renderContext = {canvasContext: context, viewport: viewport};
+    page.render(renderContext);
+    pdfCanvas.classList.add('shadow-canvas');
+  });
+}