使用jsPDF将HTML内容转换为PDF文件

时间:2017-07-06 21:07:14

标签: javascript jquery html pdf jspdf

尝试自动将此内容转换为pdf文件。根据我的其余代码的设置方式,我必须让按钮单击INSIDE我要导出为pdf的div。这是一个问题吗?这是我到目前为止所拥有的。当我点击按钮时,它什么也没做。

JS:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<script>
jQuery('#generatereport').click(function () {
    doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
        'width': 170
    });
    doc.save('sample-file.pdf');
});
</script>

HTML:

<div class="survey-results" style="display: none;" id="lppresults">
   <button id="generatereport">Download Report</button>
   TEST CONTENT
</div>

2 个答案:

答案 0 :(得分:1)

不,这不是问题。您可以在div元素中使用该按钮。虽然你还有其他一些问题。这是您的代码的修订版本......

var doc = new jsPDF();
$('#generatereport').click(function() {
   doc.fromHTML($('#lppresults')[0], 15, 15, {
      width: 170
   }, function() {
      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://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<div class="survey-results" id="lppresults">
  <button id="generatereport">Download Report</button> TEST CONTENT
</div>

答案 1 :(得分:0)

您需要初始化jsPDF类:Disruptor<CustomEvent> disruptor = new Disruptor<CustomEvent>(eventFactory, bufferSize, executor, ProducerType.MULTI, new BlockingWaitStrategy());

var doc = new jsPDF();
var doc = new jsPDF();
jQuery('#generatereport').click(function() {
  doc.fromHTML(jQuery('#lppresults').html(), 15, 15, {
    'width': 170
  });
  doc.save('sample-file.pdf');
});