Question

我有一个用户将部分填写的表单。一旦他们完成了所有选择，我想将页面呈现为PDF，然后将其作为电子邮件发送。我似乎无法绕过教程和示例。目前我的头部

中引用了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>

我一无所获。无论我做了什么。我玩的最多的是一个空白页但没有内容。任何帮助我指导正确方向的帮助都将非常感激！

Answer 1

此代码段似乎有效，但不确定这是否是您想要的。我更正了语法并在点击函数中移动了doc变量。

至于空的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>

使用jsPDF将HTML表单转换为PDF

1 个答案: