Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add a signature to a pdf document in a specific place using forms in html, css, js

i tried using jsPdf, signature pad but all i could do is add the signature to a pdf created using forms but i couldn’t put the signature in the desired place.

i need a solution for this
if I input a PDF that has a written place for e-signature, how to put it in the desired place?
here’s the sample pdf pdf-link

<script>
    import { onMount } from 'svelte';
    import SignaturePad from 'signature_pad';
    import html2canvas from 'html2canvas';
    import jsPDF from 'jspdf';

    let signaturePad;
    let canvasImg = '';

    onMount(() => {
        const canvas = document.getElementById('signatureCanvas');
        signaturePad = new SignaturePad(canvas);
        const generatePDF = async () => {
            const downloadButton = document.getElementById('downloadButton');
            downloadButton.innerHTML = 'Currently downloading, please wait';

            //Downloading
            const whatToPrint = document.getElementById('whatToPrint');
            const doc = new jsPDF('l', 'pt');

            await html2canvas(whatToPrint, {
                width: 530
            }).then((canvas) => {
                //Canvas (convert to PNG)
                doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 5, canvas.width, canvas.height);
            });

            doc.save('Document.pdf');

            //End of downloading

            downloadButton.innerHTML = 'Click to download';
        };

        window.generatePDF = generatePDF;
    });
    function clearSignature() {
        signaturePad.clear();
    }

    function saveSignature() {
        const signatureData = signaturePad.toDataURL(); // signature as base64 data URL
        console.log(signatureData);
    }
    function saveSignatureImg() {
        const signatureData = signaturePad.toDataURL('image/png'); //  signature as image data URL
        canvasImg = signatureData;
    }
</script>

<div id="" style="width: 500px; padding: 10px; background-color: antiquewhite; margin:0 auto;">
    <h1>Sample form with signature</h1>
    <div class="form" id="whatToPrint">
        <form action="">
            <label for="h">firstname</label>
            <input id="h " type="text" />
            <label for="h">lastname</label>
            <input id="h " type="text" />
            <label for="h">age</label>
            <input id="h " type="number" />
            <label for="h">Salary</label>
            <input id="h " type="number" />
            <label for="h">School/University</label>
            <input id="h " type="text" />

            {#if canvasImg}
                <img id="signatureCanvas" src={canvasImg} alt="canvasImg" />
            {/if}
            <label for="h">....................</label>
            <label for="h">signature</label>
        </form>
    </div>
    <section class="container">
        <canvas id="signatureCanvas" width="400" height="200"></canvas>

        <div>
            <button on:click={clearSignature}>Clear</button>
            <button on:click={saveSignatureImg}>Save As Img</button>
            <button on:click={saveSignature}>Save</button>
        </div>
    </section>
    <a href="javascript:generatePDF()" id="downloadButton">Click to download</a>
</div>

<style>
    .form {
        background-color: pink;
    }
    .form form {
        display: flex;
        flex-direction: column;
        background-color: antiquewhite;
    }
    #signatureCanvas {
        margin-top: 15px;
        border: 1px solid #000;
        width: 100%;
        max-width: 400px;
        height: 200px;
    }
</style>

signature has to be put on the specific place on pdf by signing on the webpage.any package is welcome.

Tags:

2

Answers


  1. 0

    I was able to add the signature on its place:

    signature

    Here are the code changes:

    onMount(() => {
    const canvas = document.getElementById('signatureCanvas');
    signaturePad = new SignaturePad(canvas);
    console.log(signaturePad)
    console.log(signaturePad.canvas)
    const generatePDF = async () => {
        const downloadButton = document.getElementById('downloadButton');
        downloadButton.innerHTML = 'Currently downloading, please wait';

        //Downloading
        const whatToPrint = document.getElementById('whatToPrint');
        const doc = new jsPDF('l', 'pt');

        await html2canvas(whatToPrint, {
            width: 600
        }).then((canvas) => {
            //Canvas (convert to PNG)
            doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 5, canvas.width, canvas.height);
            doc.addImage(signaturePad.canvas, 'PNG', 0, canvas.height - 45, signaturePad.canvas.width / 4, signaturePad.canvas.height / 4);
        });

        doc.save('Document.pdf');

        //End of downloading

        downloadButton.innerHTML = 'Click to download';
    };

    window.generatePDF = generatePDF;
});

    I added one more .addImage with the canvas from signaturePad object. For the height I am taking the previous canvas height minus 45. I think the number 45 can be replaced with taking the last element height and divided by 2. After that I resize the signature canvas, because by default it came too big.

    Login or Signup to reply.
  2. 0

    The proposed sample link is to an e-sign service. Thus it is not possible to simply add a signature, as it needs to be validated as an embedded timestamped image within the software as a service.

    JS.PDF is not suited to this task. NOR is it suited to fill Acroform fields in general, as it does not interact with 3rd party forms.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search