CRM 平台电子签名插件中使用的 Signature Pad 和 DOMPDF

Question

我创建了一个必须生成签名 PDF 的插件。在生成 PDF 之前，您需要在框中输入您的姓名并使用 pad 绘制签名。

我试过this question, but I get an error: Uncaught TypeError: $(...).signaturePad is not a function. Beside this error, the CSS is not loading, not JS too and the page where you need to sign looks like this: , but if I open the sign.html file in PC, it looks normal, like this:

我在每个 CSS 和我拥有的 JS 文件上都有这个：

所以，我想做的是解决signaturePad函数的错误并正确加载CSS和JS文件，然后点击Sunt de acord cu termenii si conditiile!转到/templates/contract.php 页面并生成带有我在 sign.php 文件上签名的 PDF 文件。

这是 sign.php 文件的代码：

<?php chdir(__DIR__); ?>

<!DOCTYPE html>
<html lang = "EN">
    <head>
        <meta charset = "UTF-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=Edge">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <style>
            body {  font: normal 100.01%/1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;    }
        </style>
        <link href = "<?php __DIR__ . '/assets/jquery.signaturepad.css' ?>" rel = "stylesheet">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    </head>

    <body>
        <form method = "post" action = "<?php __DIR__ . '/templates/contract.php' ?>" class = "sigPad">
            <div class = "sigPad">

                <label for = "name">
                    Introdu numele in casuta de mai jos:
                </label>
                <input type = "text" name = "name" id = "name" class = "name">

                <p class = "typeItDesc">
                    Previzualizeaza semnatura
                </p>
                <p class = "drawItDesc">
                    Deseneaza semnatura
                </p>

                <ul class = "sigNav">
                    <li class = "typeIt">
                        <a href = "#type-it" class = "current">
                            Scrie
                        </a>
                    </li>

                    <li class = "drawIt">
                        <a href = "#draw-it" class = "current">
                            Deseneaza
                        </a>
                    </li>

                    <li class = "clearButton">
                        <a href = "#clear" class = "current">
                            Sterge
                        </a>
                    </li>
                </ul>
                
                <div class = "sig sigWrapper">
                    <div class = "typed"></div>
                    <canvas class = "pad" width = "198" height = "55"></canvas>

                    <input type = "hidden" name = "imgOutput" class = "output" />
                </div>
                
                <button type = "submit">
                    Sunt de acord cu termenii si conditiile!
                </button>

            </div>
        </form>

        <script src = "<?php __DIR__ . '/assets/jquery.signaturepad.js' ?>"></script>
        <script>
            $(document).ready(function() {
                $('.sigPad').signaturePad();
            });
        </script>
        <script src = "<?php __DIR__ . 'assets/json2.min.js' ?>"></script>
    </body>
</html>

Answer 1

现在 CSS 和 JS 文件正在加载。

我添加了：

<style>
   <?php include __DIR__ . '/assets/jquery.signaturepad.css' ?>
</style>

和

<script>
   <?php include __DIR__ . '/assets/json2.min.js' ?>
</script>

CRM 平台电子签名插件中使用的 Signature Pad 和 DOMPDF

Signature Pad and DOMPDF used in e-signature plugin for CRM platform

html

javascript

css

php

dompdf