{{myResult}}
+ console.log(result) + dmx.global.set('myResult', result); + +} +async function toBase64(filePath) { + const img = await fetch(filePath).then(res => res.arrayBuffer()) + console.log(img) + dmx.global.set('imgResult', img) + return img +} \ No newline at end of file diff --git a/public/PDF/jsPDF.js b/public/PDF/jsPDF.js new file mode 100644 index 0000000..a433c94 --- /dev/null +++ b/public/PDF/jsPDF.js @@ -0,0 +1,42 @@ +async function updatePdfFields(pdfBytes, dataSource) { + // Load the PDF document + const pdfDoc = await PDFDocument.load(pdfBytes); + const form = pdfDoc.getForm(); + + // Loop over each record in the Wappler data source + dataSource.forEach((record) => { + // Loop over each key-value pair in the record + Object.entries(record).forEach(([fieldName, fieldValue]) => { + // Find the form field in the PDF by name + const formField = form.getTextField(fieldName); + + // If the field exists in the PDF, update it with the value + if (formField) { + formField.setText(String(fieldValue)); + } + }); + }); + + // Serialize the PDF back to bytes and return + const updatedPdfBytes = await pdfDoc.save(); + return updatedPdfBytes; +} + +// Usage Example +async function main() { + // Load your PDF as bytes (e.g., using fetch) + const pdfBytes = await fetch("path/to/your.pdf").then((res) => + res.arrayBuffer() + ); + + // Sample data source from Wappler + const dataSource = [ + { fieldName1: "Value1", fieldName2: "Value2" }, + { fieldName1: "AnotherValue1", fieldName2: "AnotherValue2" }, + ]; + + // Call the function to update the PDF fields + const updatedPdfBytes = await updatePdfFields(pdfBytes, dataSource); + + // Do something with the updated PDF, e.g., download it or display it +} diff --git a/public/PDF/libPDFscripts.js b/public/PDF/libPDFscripts.js new file mode 100644 index 0000000..b4435dd --- /dev/null +++ b/public/PDF/libPDFscripts.js @@ -0,0 +1,101 @@ +// JavaScript Document + +//Use this function as a start - to pass the path, then datasource to update with pdfbytes, then download -- Maybe combine into one file? +//wich is more efficient? + +//filepath = /PDF/XXX.pdf, dataSource = datastore.var +// *** Use of 'rest paramater' syntax to add extra datasources at the end. +//return array of datasources i.e [datastore,data_view1] and pass that array to updatePdfFields +//Consider default values = filepath = '/PDF/masterTemplate.pdf' +async function toBase64(filePath, ...dataSources) { + console.log(filePath); + const pdfBytes = await fetch(filePath).then((res) => res.arrayBuffer()); + + // console.log(dataSources); // should be only 2, + updatePdfFields(pdfBytes, dataSources); + + //return pdfBytes +} + +async function updatePdfFields(pdfBytes, dataSources) { + // Load the PDF document + console.log("pdfBytes.size =", pdfBytes.byteLength); + console.log(dataSources); + const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes); + const form = pdfDoc.getForm(); + + // Loop over each data source passed to the function + dataSources.forEach((dataSource) => { + // Loop over each record in the current data source + dataSource.forEach((record) => { + // Loop over each key-value pair in the record + Object.entries(record).forEach(([fieldName, fieldValue]) => { + console.log(fieldName, " => ", fieldValue); + + // Find the form field in the PDF by name + /** !!! BLOCK 1 Start + const formField = form.getTextField(fieldName); + // If the field exists in the PDF, update it with the value + if (formField) { + formField.setText(String(fieldValue)); + } + **/ // BLOCK 1 END + }); + }); + }); + + // Serialize the PDF back to bytes + const updatedPdfBytes = await pdfDoc.save(); + + // Trigger download of the updated PDF + downloadPdf(updatedPdfBytes, "UpdatedDocument.pdf"); +} + +// Function to trigger download of the updated PDF +function downloadPdf(pdfBytes, fileName) { + // Create a Blob from the PDF bytes + const blob = new Blob([pdfBytes], { type: "application/pdf" }); + const url = URL.createObjectURL(blob); + + // Create a link element for the download + const link = document.createElement("a"); + link.href = url; + link.download = fileName; + + // Append the link to the document, trigger a click, and remove it afterward + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + // Release the object URL to free up memory + URL.revokeObjectURL(url); +} + +// Usage Example +async function main() { + // Load your PDF as bytes (e.g., using fetch) + const pdfBytes = await fetch("path/to/your.pdf").then((res) => + res.arrayBuffer() + ); + + // Sample data sources from Wappler + const dataSource1 = [{ fieldName1: "Value1", fieldName2: "Value2" }]; + const dataSource2 = [ + { fieldName3: "AnotherValue1", fieldName4: "AnotherValue2" }, + ]; + + // Call the function with multiple data sources + await updatePdfFields(pdfBytes, dataSource1, dataSource2); +} + +function generateRandomFilename() { + const characters = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let filename = ""; + for (let i = 0; i < 8; i++) { + const randomIndex = Math.floor(Math.random() * characters.length); + filename += characters[randomIndex]; + } + console.log("Random Filename: ", filename); + return filename; +} diff --git a/public/PDF/pdfLibSignature.js b/public/PDF/pdfLibSignature.js new file mode 100644 index 0000000..446ae31 --- /dev/null +++ b/public/PDF/pdfLibSignature.js @@ -0,0 +1,88 @@ +// JavaScript Document v1.2 + +const canvas = document.getElementById('signatureCanvas'); +const ctx = canvas.getContext('2d'); +let drawing = false; + +function myTestFunction(variable1, variable2) { + console.log(variable1, variable2); + // Your logic here +} +// Get the canvas element + + +// Function to get the canvas offset +function getCanvasOffset() { + const rect = canvas.getBoundingClientRect(); + //console.log("offsetX:",rect.left, " OffsetY:",rect.top) + return { + offsetX: rect.left, + offsetY: rect.top + }; +} + + +function clearCanvas() { + console.log("Clear Signature area") + ctx.clearRect(0, 0, canvas.width, canvas.height); +} + +function startDrawing(e) { + console.log("Start Signature Capture") + //console.log(e) + drawing = true; + draw(e); +} + +function endDrawing() { + console.log("Stopped Signature Capture") + drawing = false; + ctx.beginPath(); +} + +function draw(e) { + //console.log(e) + if (!drawing) return; + ctx.lineWidth = 2; + ctx.lineCap = 'round'; + ctx.strokeStyle = '#000'; + + const { offsetX, offsetY } = getCanvasOffset(); + let x = e.clientX - offsetX //canvas.offsetLeft; + let y = e.clientY - offsetY //canvas.offsetTop; + //console.log("X:",x," Y:",y) + + //let x = e.clientX - canvas.offsetLeft; + //let y = e.clientY - canvas.offsetTop; + //console.log("X:", x, " Y:", y) + ctx.lineTo(x, y); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y); +} + + +function generateRandomIdentifier(size) { + + if (size > 20) { + let size = 20 + console.log("randomIdentifier Exceeded max len of 20. Defaults to 20 ") + } + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let randIdentifier = ''; + for (let i = 0; i < size; i++) { + const randomIndex = Math.floor(Math.random() * characters.length); + randIdentifier += characters[randomIndex]; + } + console.log("Random randIdentifier: ", randIdentifier); + return randIdentifier; +} +//canvas.addEventListener('mousedown', startDrawing); +//canvas.addEventListener('mouseup', endDrawing); +//canvas.addEventListener('mousemove', draw); + +// ** TOUCH EVENT LISTNERS FOR TABLETS + +//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0])); +//canvas.addEventListener('touchend', endDrawing); +//canvas.addEventListener('touchmove', (e) => draw(e.touches[0])); \ No newline at end of file diff --git a/public/PDF/pdfScripts.js b/public/PDF/pdfScripts.js new file mode 100644 index 0000000..d628977 --- /dev/null +++ b/public/PDF/pdfScripts.js @@ -0,0 +1,43 @@ +// JavaScript Document + +//import { PDFDocument } from 'pdf-lib' + +//http://localhost:8100/assets/pdf/testpdf.pdf +async function fillform() { + const formURL = "/assets/pdf/testpdf.pdf"; + const formPdfBytes = await fetch(formURL).then((res) => res.arrayBuffer()); + const pdfdoc = await PDFDocument.load(formPdfBytes); +} + +function myTestFunction(variable1, variable2) { + console.log(variable1, variable2); + // Your logic here +} + +//Use this function wihouth the http to pull from remote host. +async function pullPDF() { + // IDEA: Load all the possible methods and calls in one run then you can expose to Wappler for processing. As long as the dmx.set function will work + + const formUrl = "/assets/PDFdemo.pdf"; //'https://pdf-lib.js.org/assets/dod_character.pdf' + const formPdfBytes = await fetch(formUrl).then((res) => res.arrayBuffer()); + const pdfDoc = await PDFLib.PDFDocument.load(formPdfBytes); + const form = pdfDoc.getForm(); + + console.log("Size of pdf:", formPdfBytes.byteLength); + + const fieldnames = []; //empty array to assign each field name to. + const fields = form.getFields(); + + fields.forEach((field) => { + const name = field.getName(); + fieldnames.push(name); + console.log("Field name:", name); + }); + + console.log("First field name:", fields[0].getName()); + + console.log(fieldnames); + // dmx.set('fieldsList', fieldnames) + console.log("Size of pdf:", pdfObjects[1].byteLength); + const pdfObjects = [formUrl, formPdfBytes, pdfDoc, form, form.getFields()]; +} diff --git a/public/PDF/test-Copy.pdf b/public/PDF/test-Copy.pdf new file mode 100644 index 0000000..cc3bde6 --- /dev/null +++ b/public/PDF/test-Copy.pdf @@ -0,0 +1,10293 @@ +%PDF-1.6 +% +1 0 obj +<< +/AcroForm 2 0 R +/Lang