使用jsPDF将HTML表单转换为PDF

我有一个表单，用户将会部分填写表单。一旦他们做出了他们所有的选择，我想将页面呈现为PDF，然后将其作为电子邮件发送。我似乎无法将自己的头围绕教程和示例。目前，我有jQuery和jspdf在我的脑海节使用jsPDF将HTML表单转换为PDF

<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>

接下来，我开始我的形式和有一个包含我想呈现

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

其次是所有的表单输入整个页面的一个DIV，然后我关闭DIV，并具有应产生的PD按钮F

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

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

来源

2016-09-20 UniCav

这段代码似乎工作，但不知道如果这是你想要的。我更正了语法并在点击函数中移动了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>

来源

2016-09-20 16:25:54 Nishant

这确实使它创建PDF，但是它是空白的。我将不得不开始挖掘html2canvas或rasterizeHTML，并看看我能否使它工作。本来我打算尝试将原始PDF与POST值合并，但在阅读一些内容后，我认为这样做会更容易或更高效。 – UniCav

有像wkhtmltopdf，weasyprint等服务器端解决方案。如果你想要许可的话，还有Prince XML和PDF Reactor。 – Nishant

我在很多帖子中都看到过这些。所有这一切的缺点当然是我不是程序员，我不得不拼凑起来，并从例子中对它进行逆向工程，而这些例子大多数时候都是我设法做到的。到目前为止，这已经超出了我能处理的范围。作为一名全能的IT人员，不得不从一天的安装设备到重写所有Web形式的下一个不幸的副作用。 – UniCav

使用jsPDF将HTML表单转换为PDF

回答

相关问题