使用jsPDF將HTML內容轉換爲PDF文件

Question

嘗試自動將此內容轉換爲pdf文件。根據我的其他代碼的設置，我必須有按鈕來點擊INSIDE div我想要導出到pdf。這是一個問題嗎？這是迄今爲止我所擁有的。當我點擊按鈕時，它什麼都不做。

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> 

Answer 1

您需要初始化jsPDF類：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'); 
 
});

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

Answer 2

不，這不是問題。您可以使用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>