Question

我是新手，所以如果我的问题很愚蠢，请原谅。我的问题是当我尝试使用此处的说明进行多个签名时：https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html

当我将类“sigPad”从Form标签移动到Div标签（如链接中的示例中）时，domPDF创建不起作用。 “图片未找到”。

因此，为了将我的问题归结为其本质，我已将其缩小到这个问题。如果我将类“sigPad”移动到div，为什么表单不能与我的domPDF脚本一起使用。

另外，我有任何解决方法吗？我有一个大型表单现在可以使用dompdf，我想添加几个签名。我宁愿没有表格标签中的类。

这是一个没有多个签名的示例，只是尝试将sigPad类移动到div而不是表单中。如果它在Form标签中有效，如果它在div标签中，则不会：

Signature.PHP

<form method="post" action="pdf.php">
<div class="sigPad">
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output" class="output" />
</div>
<button type="submit">I accept the terms of this agreement.</button>
</form>
<script>
var sig;
$( document ).ready( function ( ) {
sig = $('.sigPad').signaturePad();
} );
$( '.sigPad' ).submit( function ( evt ) {
$( '.output' ).val( sig.getSignatureImage( ) );
} );  
</script>

PDF.PHP

<?php
if(isset($_POST['output'])){$output = $_POST['output'];}
require_once '/dompdf/dompdf_config.inc.php';
$html = '<!DOCTYPE html><html><head></head><body><p>Your signature:</p><br /><img src="'. $output .'"></body></html>';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
?>

非常感谢任何帮助。谢谢！

Answer 1

当您将.sigPad类从FORM元素移动到DIV元素时，您不再有可以触发的submit()事件。此事件仅适用于FORM元素。由于未触发此事件，因此签名图像数据不会复制到INPUT元素中。

尝试类似以下内容的更新：

<强> HTML

<form method="post" action="pdf.php">
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output1" class="output" />
  </div>
  <div class="sigPad">
    <canvas class="pad" width="198" height="55"></canvas>
    <input type="hidden" name="output2" class="output" />
  </div>
  <button type="submit">I accept the terms of this agreement.</button>
</form>

<强>的JavaScript

<script>
  $( document ).ready( function ( ) {
    $('.sigPad').signaturePad( );
  } );
  $( 'form' ).submit( function ( evt ) {
    $( '.sigPad' ).each( function ( idx , el ) {
      $( this ).find( '.output' ).val( $( this ).signaturePad( ).getSignatureImage( ) );
    } );
  } );  
</script>

更新的JavaScript并不完美，可能对您来说有点混乱，但它足够灵活，可以处理任意数量的签名字段。发生的是当提交文档的表单被解析为签名板容器时。然后each()构造用于将input.output元素的值设置为签名板的值。

<强> PHP

<?php
require_once '/dompdf/dompdf_config.inc.php';
$output1 = ( !empty( $_POST['output1'] ) ? $_POST['output1'] : 'http://placekitten.com/300/100' );
$output2 = ( !empty( $_POST['output2'] ) ? $_POST['output2'] : 'http://placekitten.com/300/100' );
$html = '
  <!DOCTYPE html>
  <html>
  <head></head>
  <body>
    <p>Signature 1:</p><br /><img src="'. $output1 .'">
    <p>Signature 2:</p><br /><img src="'. $output2 .'">
  </body>
  </html>
';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
?>

我喜欢ternary operators来初始化变量，但我是邪恶的。此外，我们应始终注意从客户端执行额外的数据验证。所以我可能会增强PHP，至少看看base64数据实际上是不是base64（而不是HTML片段）。

$output1 = (!empty( $_POST['output1'] ) && base64_encode( base64_decode( $_POST['output1'] ) ) === $_POST['output1']) ? $_POST['output1'] : 'http://placekitten.com/300/100';

您甚至可以更进一步检查它是否真的是一张图片。但是我会把它作为锻炼给你。

签名垫DomPDF和多个签名

1 个答案: