javascript - 如何构建一个应用程序，让用户填写一个可以下载或通过电子邮件发送为 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', 0, 0, $('#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', 'pt', [$('#content2').width(), $('#content2').height()]);
    
                    pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
                    pdf.save("test.pdf");
    
                    that.options.api.optionsChanged();
                });
        });

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

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

标签： javascriptcordovapdfserverphonegap

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

问题描述

解决方案

推荐阅读