使用JavaScript将用户点击HTML页面导出为PDF
当用户点击GeneratePDFbutton时，我需要将html页面导出为PDF文件。 我成功地将HTML页面导出为PDF文件，但只有第一次点击，我才能够将数据下载到PDF，但从第二次点击我无法将数据下载到PDF文件。 我不确定代码中哪里出错了。
请在这里查看代码：
$(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>
这是因为你在你的点击事件之外定义了“doc”variables。 第一次单击button时，docvariables包含一个新的jsPDF对象。 但是当你第二次点击时，这个variables不能以相同的方式使用。 因为它已经被定义和使用了。
将其更改为：
$(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'); } ); }); });
它会工作。
