如何构建一个应用程序，使用户填写可以下载为PDF或通过电子邮件发送的表单？

问题描述

我正在通过Phonegap（用HTML / CSS / JS编写）开发一个应用程序，目的是让用户填写一个表单（单选按钮，文本框等），然后将其下载（以PDF格式） ），也可以在完成后直接发送到特定的电子邮件（PDF格式）。

我一直在使用JavaScript函数，将页面打印为PDF，单击页面底部的按钮即可自动下载PDF。

但是我注意到从我无法在生成的PDF中突出显示打印文本的意义上，“打印为PDF”功能似乎不是真正的PDF。此外，每次打印中的信息量似乎都有限制。我无法在页面上打印超出特定长度的内容。我也不确定这是否适用于移动设备，但是在Chrome浏览器中进行测试（似乎有问题）时，它似乎可以正常工作。

在用户填写表格后创建PDF的最佳方法是什么？我已经读到我可以在服务器端创建一些东西，并在用户填写页面上的信息后，让该应用从服务器发送PDF（通过电子邮件）。听起来不错吗？

我可以这样做，以便用户填写应用程序中的信息，单击按钮，然后保存应用程序中的信息，并通过电子邮件发送所述信息的PDF吗？我不太确定如何设置服务器来做到这一点。

简而言之，我只希望我的客户在应用程序中填写信息，然后单击页面底部的按钮，然后获取该信息并吐出PDF。我很难找到一种有效的方法来真正做到这一点。

到目前为止，这是我的代码（无CSS头）：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
        integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

    <div id="content2" class="app">      
        <h1><u>4-Point Inspection</u></h1>

        <br>

        <div class="border">
        <center><form>
          <label for="fname">Insured/Applicant Name</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Application/Policy #</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Address Inspected</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Phone</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Actual Year Built</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Email</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center>
        <center><form>
          <label for="fname">Date Inspected</label>
          <input type="text" id="fname" name="fname"><br><br>
        </form></center></div>

    </div>

    <center><button class="btn btn-info" id="downloadPDF">Download PDF</button></center>

    <script>$('#downloadPDF').click(function () {
        domtoimage.toPng(document.getElementById('content2'))
            .then(function (blob) {
                var pdf = new jsPDF('l','pt',[$('#content2').width(),$('#content2').height()]);

                pdf.addImage(blob,'PNG',$('#content2').width(),$('#content2').height());
                pdf.save("test.pdf");

                that.options.api.optionsChanged();
            });
    }); </script>

这是Javascript函数（也在上面的代码结尾显示）：

$('#downloadPDF').click(function () {
            domtoimage.toPng(document.getElementById('content2'))
                .then(function (blob) {
                    var pdf = new jsPDF('l',$('#content2').height()]);
    
                    pdf.addImage(blob,$('#content2').height());
                    pdf.save("test.pdf");
    
                    that.options.api.optionsChanged();
                });
        });

我只是想将这种交互式表单转换为可下载或仅通过电子邮件发送至特定电子邮件地址的PDF的方式-我只是不知道这样做的最有效方法。

任何人和所有帮助/建议将不胜感激。谢谢！

解决方法

您应该看看https://github.com/cesarvr/pdf-generator

用于生成（离线）pdf的简单插件。插件将HTML转换为 PDF，并提供了与其他应用共享pdf的机制 邮件等。如果您想添加其他内容，则暂时可以在iOS和Android中使用 平台随时贡献。

iOS HTML到PDF的转换基于这项工作BNHtmlPdfKit， 我只是添加了一个新方法，以允许在纯HTML到 PDF。