首页 文章

使用 jsPDF 将 HTML 表单转换为 PDF

提问于
浏览 次
0

我有一个用户将部分填写的表单。一旦他们完成了所有选择，我想将页面呈现为 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>

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

jquery html forms pdf jspdf

1 回答

  • 0

    这个片段似乎有用，但不确定这是否是你想要的。我更正了语法并在 click 函数中移动了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>
    回复于

相关问题