Laravel - 从表单生成 PDF，还包括用户的签名

Question

我的水平面临很大挑战。

标题不言自明：使用 Laravel 从表单生成 PDF，包括用户签名。

My laravel and general php level is basic。我知道如何在 laravel 上创建一个基本的博客（就像所有关注 laracast 或类似的人一样）但是这个我觉得很难，因为我看到有很多来自不同地方的概念同时发生并且我有很多差距知识。

知道哪些软件包最适合完成所有这些工作，这至少会很有帮助。我一直在尝试使用 DOMPDF 和 https://github.com/szimek/signature_pad。但是我已经阅读了 DOMPDF 我不能使用活动表单...我还检查了 MPDF。

我主要需要的是一个视图，里面有一个表单，有一个签名板供用户在表单后签名，这个，提交后生成一个pdf。

关于阅读、学习、关注什么的任何起点？

已经如何将脚本在js上的签名图像与表单的数据混合起来对我来说似乎是最重要的。

我无法想象的是如何处理不同的控制器..

Answer 1

承认您缺乏独自完成此任务的知识。问这个问题并不丢人，我想这也会让你的生活更轻松。

我的建议是将整个任务拆分为您能够处理的合适的子任务。在我看来是：

1. 创建一个可以提交的绝对正常的 HTML 表单。
   为此，您需要一个具有两种功能的控制器。一个函数会显示表单，另一个函数会在表单提交后处理提交的数据。

   class MyFormController
   {
       public function getForm()
       {
           return view('my.form');
       }
   
       public function postForm(Request $request)
       {
           // do something with the form data in $request
       }
   }
   

   我猜你知道如何组合一个合适的 HTML 表单。

2. 使用提交的表单数据生成 PDF。
   Laravel 的大多数 pdf 生成器包的工作方式是使用刀片模板视图。这对您来说实际上是非常有益的，因为您已经知道如何组合 HTML 视图！

   因此，如果我们将其转换为基于 barryvdh/laravel-dompdf 包的代码，我们会得到如下内容：

   public function postForm(Request $request)
   {
       $pdf = PDF::loadView('my.pdf', [
           'name' => $request->input('name'),
           'address' => $request->input('address'),
           // ... and more data if you like
       ]);
   
       return $pdf->download('signed_form.pdf');
   }
   

   当然，我们还需要一个刀片模板。根据名称会有路径和文件名resources/views/my/pdf.blade.php:

   <table>
     <tr>
       <th>Name:</th>
       <td>{{ $name }}</td>
     </tr>
     <tr>
       <th>Address:</th>
       <td>{{ $address }}</td>
     </tr>
   </table>
   

3. 现在，由于我们已经生成了表单和 PDF，我们可以继续进行签名。
   公平地说，到目前为止，我自己从未做过类似的事情。但经过快速搜索后，我发现了 JavaScript 包 szimek/signature_pad，它看起来非常有前途。我认为这个设置是不言自明的，但这是我目前所理解的：

   • 将文档中给出的脚本标签 (<script src="...">) 添加到表单视图中。
   • 在表单中添加一个隐藏的输入字段 (<input type="hidden" name="sig" id="sig">)。
   • 将<canvas> HTML 元素添加到您的表单视图。给它一个标识符：<canvas id="signature">。

   • 添加另一个脚本标记，但自定义 JavaScript 代码低于您已添加的代码。像这样的：

     <script type="text/javascript">
         var canvas = document.getElementById('signature');
         var signaturePad = new SignaturePad(canvas);
     
         function onFormSubmit()
         {
             document.getElementById('sig').value = signaturePad.toDataURL();
         }
     </script>
     

   • 您现在还必须将onsubmit="onFormSubmit()" 添加到您的<form ...> 标记中。该脚本的作用是首先初始化签名板，然后将隐藏输入字段的值设置为签名板的内容。

   • 您要做的最后一件事是将提交的sig 值添加到用于生成pdf 的视图中。在视图本身中，您必须在新的图像元素中使用提交的 sig 数据：<img src="{{ $sig }}">

如果你幸运的话，我刚刚写下的所有内容（没有任何测试）都是开箱即用的。如果没有，您至少应该知道实现目标的步骤是什么。

顺便说一句，你当然可以让所有的视图看起来很花哨。但请注意，PDF 无法像 HTML 那样显示尽可能多的信息。因此，当您将视图转换为 pdf 时，您肯定会在某些时候丢失信息和样式。