使用JavaScript在用户点击时将HTML页面导出为PDF
[英]Export HTML page to PDF on user click using JavaScript
问题描述
When user click on GeneratePDF button, I need to export the html page into a PDF file. 
当用户点击GeneratePDF按钮时，我需要将html页面导出为PDF文件。 I am successfully exporting HTML page into PDF file but for the first click only I am able to download data into PDF but from the second click I am unable to download the data to PDF file. 我成功将HTML页面导出为PDF文件，但只有第一次点击我才能将数据下载到PDF中，但是从第二次点击我无法将数据下载到PDF文件。 I am not sure where I went wrong in the code. 我不确定我在代码中出错了。
Please check the code here: 请在这里查看代码：
$(function() { var doc = new jsPDF(); var specialElementHandlers = { '#editor': function(element, renderer) { return true; } }; $('#cmd').click(function() { doc.fromHTML($('#target').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script> <script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js "></script> <script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script> <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script> <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script> <script type="text/javascript" src="js/basic.js"></script> <body id="target"> <div id="content"> <h3>Hello, this is a H3 tag</h3> <a class="upload">Upload to Imgur</a> <h2>this is <b>bold</b> <span style="color:red">red</span></h2> <p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9 </p> </div> <button id="cmd">generate PDF</button> </body> </html>
1 个解决方案
解决方案1
28 已采纳 2013-11-05 10:30:46
This is because you define your "doc" variable outside of your click event. 这是因为您在click事件之外定义了“doc”变量。 The first time you click the button the doc variable contains a new jsPDF object. 第一次单击按钮时，doc变量包含一个新的jsPDF对象。 But when you click for a second time, this variable can't be used in the same way anymore. 但是当您再次单击时，此变量不能再以相同的方式使用。 As it is already defined and used the previous time. 因为它已经定义并使用了前一次。
change it to: 将其更改为：
$(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 },
function(){ doc.save('sample-file.pdf'); }
);
});
});
and it will work. 它会起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.