使用 jsPDF 将 HTML 表单转换为 PDF答案

【问题标题】：Getting HTML Form into PDF with jsPDF使用 jsPDF 将 HTML 表单转换为 PDF
【发布时间】：2016-09-20 16:10:05
【问题描述】：

我有一个用户将填写的表格。一旦他们做出了所有选择，我想将页面按原样呈现为 PDF，然后将其作为电子邮件发送。我似乎无法完全理解教程和示例。目前我在我的 head 部分引用了 jquery 和 jspdf

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

这是我当前的功能脚本 - 基本上是在这里和其他地方的几十页中概述的内容

<script type="text/javascript">
 $(function() {
   var specialElementHandlers = {
     '#editor': function (element,renderer) {
       return true;
    }
 };
 $('#cmd').click(function () {
    var doc = new jsPDF();
     doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,'elementHandlers': specialElementHandlers
      });
    });
      doc.output("dataurlnewwindow");
    });
  });
  </script>

接下来我开始我的表单并有一个包含我想要呈现的整个页面的 DIV

<body>
<form action="" method="post">
<div id="target">

接着是所有表单输入，然后我关闭 DIV 并拥有应该生成 PDF 的按钮

</div>
<p>
<button id="cmd">Generate PDF</button>
</p>
</form>
</body>
</html>

我什么也得不到。不管我做了什么。我玩过的最多的是一个空白页面，但没有内容。任何帮助我朝着正确的方向前进将不胜感激！

【问题讨论】：

标签： jquery html forms pdf jspdf

【解决方案1】：

这个 sn-p 似乎可以工作，但不确定这是否是您想要的。我更正了语法并将 doc 变量移到了 click 函数中。

对于空 PDF 问题，https://github.com/MrRio/jsPDF/issues/130 和 https://github.com/MrRio/jsPDF/issues/270 可能会有所帮助。

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script type="text/javascript">
    $(function() {
    var specialElementHandlers = {
        '#editor': function(element, renderer) {
            return true;
        }
    };
    $('#cmd').click(function() {
        var doc = new jsPDF();
        doc.fromHTML($('#target').html(), 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });
        doc.output("dataurlnewwindow");
    });
    });
    </script>
</head>

<body>
    <form action="" method="post">
        <div id="target">
        <input type="text" value="Nishant"/>
        </div>
        <p>
            <button id="cmd">Generate PDF</button>
        </p>
    </form>
</body>

</html>

【讨论】：

这确实使它创建了 PDF，但是是的，它是空白的。我将不得不开始使用 html2canvas 或 rasterizeHTML 进行挖掘，看看我是否可以让它工作。最初我打算尝试将原始 PDF 与 POST 值合并，但经过一些阅读后，我认为这样做会更容易或更有效。
有服务器端解决方案，如 wkhtmltopdf、weasyprint 等。如果你想要许可的话，还有 Prince XML 和 PDF Reactor。
我也在很多帖子中看到过这些。所有这一切的缺点当然是我不是程序员，我不得不将这些拼凑在一起并从示例中对其进行逆向工程，而我大部分时间都设法做到了。到目前为止，这已经超出了我的处理能力。不幸的是，作为一名包罗万象的 IT 人员，他必须从前一天安装设备到第二天重写所有 Web 表单。