如何使用 html、css、js 中的表单在 pdf 文档的特定位置添加签名

Question

我尝试使用jsPdf、签名板，但我所能做的就是将签名添加到使用表单创建的pdf中，但我无法将签名放在所需的位置。

我需要一个解决方案 如果我输入的PDF有电子签名的书写位置，如何将其放在所需的位置？ 这是 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>

签名必须在网页上签名，放在pdf的指定位置。欢迎任何包裹。

Answer 1

我能够在其位置添加签名：

以下是代码更改：

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;
});

我用来自signaturePad对象的画布又添加了一个.addImage。对于高度，我将之前的画布高度减去 45。我认为数字 45 可以用最后一个元素的高度除以 2 来替换。之后我调整了签名画布的大小，因为默认情况下它太大了。