CRM平台电子签名插件中使用的签名板和DOMPDF答案

【问题标题】：Signature Pad and DOMPDF used in e-signature plugin for CRM platformCRM平台电子签名插件中使用的签名板和DOMPDF
【发布时间】：2021-07-15 17:35:26
【问题描述】：

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

我尝试在this 问题中做类似的事情，但我收到一个错误：Uncaught TypeError: $(...).signaturePad is not a function。除了这个错误，没有加载CSS，也没有加载JS，你需要签名的页面看起来像这样：，但是如果我在PC上打开sign.html文件，它看起来很正常，像这样：@987654323 @

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

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

这是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>

【问题讨论】：

标签： javascript php html css dompdf

【解决方案1】：

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

我已添加：

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

和

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

【讨论】：