HTML到PDF轉換在jQuery上單擊按鈕
[英]Html to pdf convert on button click in jquery
問題描述
我正在嘗試使用動態獲取的html和jquery打印帶有某些數據的報告卡。 但是在下載時，我的pdf格式不正確。
下載時在控制台中顯示此錯誤
未捕獲（承諾）DOMException：無法在“節點”上執行“ appendChild”：僅允許文檔上的一個元素。
未捕獲（承諾）錯誤：提供的數據不是JPEG
我的代碼是
<html>
<head>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
</head>
<body>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
<div id="divprint">
</div>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
<script>
$(document).ready(function(){
alert("hello");
$("#divprint").append('<div class="modal-body" id="modal_body" style="width: 100%; float: left;"><div class="form-group" style="width: 100%; float: left;text-align:center;margin-bottom: 7px !important;" id="student_details"><span><strong>ANNUAL EXAMINATION</strong></span><br><br><span><div style="width: 100%;float: left;"><div style="float: left;width:50%;text-align: left;"><div style="float: left;width: 41.66667%;text-align: left;font-size: 12px;">Name</div><div style="float: left;width: 8.33333%; text-align: left;font-size: 12px;">:</div><div style="float: left;width:50%;text-align: left;font-size: 12px;">AYUSH SATAPATHY</div></div><div style="float: left;width:50%;text-align: left;"><div style="float: left;width: 41.66667%;text-align: left;font-size: 12px;">Date of Birth</div><div style="float: left;width: 8.33333%;text-align: left;font-size: 12px;">:</div><div style="float: left;width:50%;text-align: left;font-size: 12px;">00-00-0000</div></div></div><div style="float: left;width: 100%;"><div style="width:50%; text-align: left;"><div style="float: left;width: 41.66667%;text-align: left;font-size: 12px;">Class</div><div style="float: left;width: 8.33333%;text-align: left;font-size: 12px;">:</div><div style="float: left;width:50%;text-align: left;font-size: 12px;">I (1)</div></div><div style="float: left;width:50%;text-align: left;"><div style="font-size: 12px;float: left;width: 41.66667%;text-align: left;">Section</div><div style="float: left;width: 8.33333%;text-align: left;font-size: 12px;">:</div><div style="font-size: 12px;float: left;width:50%;text-align: left;">Section A</div></div></div><div style="width: 100%;"><div style="float: left;width:50%;text-align: left;"><div style="float: left;width:41.66667%;text-align: left;font-size: 12px;">Gurdians Name</div><div style="float: left;width: 8.33333%;text-align: left;font-size: 12px;">:</div><div style="float: left;width:50%;text-align: left;font-size: 12px;"></div></div><div style="float: left;width:50%;text-align: left;"></div></div><div style="width: 100%;float: left;"><div style="float: left;width:50%;text-align: left;" id="studentrank"><div style="font-size: 12px;float: left;width: 41.66667%; text-align: left;">Rank</div><div style="float: left;width: 8.33333%; text-align: left;font-size: 12px;">:</div><div style="float: left;width:50%;font-size: 12px;text-align: left;">3</div></div><div style="float: left;width:50%;text-align: left;" id="studentattendance"><div style="float: left;width: 41.66667%; font-size: 12px;text-align: left;">Attendance</div><div style="float: left;width: 8.33333%;font-size: 12px; text-align: left;">:</div><div style="float: left;width:50%;font-size: 12px; text-align: left;">98.25%</div></div></div></span></div><div class="form-group" style="width: 100%; float: left; margin-bottom: 5px !important;"><div style="width: 100%; float: left; font-weight: bold; font-size: 15px;"><div id="report_card" style="overflow-x:auto;"><table style="font-size: 12px; width: 100%;" class="table table-striped table-bordered table-hover" id="dataTables-report_card"><thead style="font-size: 13px;"><tr id="add_report"><th style="font-size: 9px;">Subject</th><th style="font-size: 9px;" id="add_internal_exam"><input type="text" value="ENG1" size="5" style="border: 0px !important;text-align: center;"><th style="font-size:9px;border: 1px solid #dedede;" id="ad_exam252">UNIT TEST</th><th style="font-size:9px;border: 1px solid #dedede;" id="ad_exam253">CLASS ASSESSMENT</th></th><th style="font-size: 9px;" id="inter_total"><input type="text" value="Total" size="5" style="border: 0px !important;text-align: center;"><span id="internal_total"></span></th><th style="font-size: 9px;" id="add_external_exam"><textarea rows="2" cols="6" style="border: 0px !important;text-align: center;">ENG2</textarea><th style="font-size:9px;border: 1px solid #dedede;" id="ad_exam254">ANNUAL EXAMINATION</th></th><th style="font-size: 9px;" id="exter_total"><textarea rows="2" cols="6" style="border: 0px !important;text-align: center;">External Total</textarea><br><span id="external_total"></span></th><th style="font-size:9px;"><textarea rows="2" cols="4" style="border: 0px !important;text-align: center;">Grand Total</textarea></th><th style="font-size:9px;">Highest<br>Marks</th></tr></thead><tbody id="report_details"><tr id="lang_details45"><td style="line-height: 1.1 !important;">ENGLISH LANGUAGE</td><td style="line-height: 1.1 !important;" id="internal45"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="18"></td></td><td id="internals_total841" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="19"></td></td><td id="external45" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="66"></td></td><td id="externals_total841" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="66"></td></td><td id="subtotal841" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="85"></td></td><td id="highest841" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details39"><td style="line-height: 1.1 !important;">ENGLISH LITERATURE</td><td style="line-height: 1.1 !important;" id="internal39"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="19"></td></td><td id="internals_total842" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="20"></td></td><td id="external39" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="79"></td></td><td id="externals_total842" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="79"></td></td><td id="subtotal842" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="99"></td></td><td id="highest842" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details22"><td style="line-height: 1.1 !important;">MATHS</td><td style="line-height: 1.1 !important;" id="internal22"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td></td><td id="internals_total843" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="20"></td></td><td id="external22" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="80"></td></td><td id="externals_total843" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="80"></td></td><td id="subtotal843" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="100"></td></td><td id="highest843" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details46"><td style="line-height: 1.1 !important;">SCIENCE</td><td style="line-height: 1.1 !important;" id="internal46"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="18"></td></td><td id="internals_total844" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="19"></td></td><td id="external46" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="78"></td></td><td id="externals_total844" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="78"></td></td><td id="subtotal844" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="97"></td></td><td id="highest844" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details49"><td style="line-height: 1.1 !important;">COMPUTER</td><td style="line-height: 1.1 !important;" id="internal49"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="16"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="19"></td></td><td id="internals_total845" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="18"></td></td><td id="external49" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="76"></td></td><td id="externals_total845" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="76"></td></td><td id="subtotal845" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="94"></td></td><td id="highest845" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details26"><td style="line-height: 1.1 !important;">2ND LANGUAGE</td><td style="line-height: 1.1 !important;" id="internal26"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="20"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="18"></td></td><td id="internals_total847" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="19"></td></td><td id="external26" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="78"></td></td><td id="externals_total847" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="78"></td></td><td id="subtotal847" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="97"></td></td><td id="highest847" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr><tr id="lang_details24"><td style="line-height: 1.1 !important;">GK</td><td style="line-height: 1.1 !important;" id="internal24"><td style="width:10%;border: 1px solid #dedede !important;" id="internals_252"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="18"></td><td style="width:10%;border: 1px solid #dedede !important;" id="internals_253"><input style="border: 0px !important;text-align: center;" id="int" type="text" size="3" value="18"></td></td><td id="internals_total846" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="int_marks" type="text" size="3" value="18"></td></td><td id="external24" style="line-height: 1.1 !important;"><td style="width:10%;border: 1px solid #dedede !important;" id="externals_254"><input style="border: 0px !important;text-align: center;" id="ext" type="text" size="3" value="79"></td></td><td id="externals_total846" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="ext_marks" type="text" size="3" value="79"></td></td><td id="subtotal846" style="line-height: 1.1 !important;"><td><input style="border: 0px !important;text-align: center;" id="tot_marks" type="text" size="3" value="97"></td></td><td id="highest846" style="line-height: 1.1 !important;"><td style="line-height: 1.1 !important;">0</td></td></tr></tbody></table></div><div id="grand_total" style="overflow-x:auto;"><div style="float: left;width: 50%;text-align: center;"><div style="font-size: 11px;float: left;width: 50%;text-align: right;">GRAND TOTAL</div><div style="font-size: 11px;float: left;width: 10%;text-align: center;">:</div><div style="float: left;width: 40%;text-align: left;font-size: 11px;">669 / 700</div></div><div style="float: left;width: 50%;text-align: right;"><div style="float: left;width: 40%;text-align: left;font-size: 11px;">TOTAL PERCENTAGE</div><div style="float: left;width: 10%; text-align: center;">:</div><div style="float: left;width: 50%; text-align: left;font-size: 11px;">96%</div></div></div></div></div><div class="form-group" style="width: 100%; float: left;"><div style="width: 23%; float: left; font-weight: bold; /*padding-top: 6px; font-size: 15px;margin-right:10px;*/"><div id="highest" style="overflow-x:auto;"><table style="width: 80%; font-size: 12px;margin-bottom: 10px !important;" class="table table-striped table-bordered table-hover" id="dataTables-highest"></table></div></div><div style="width: 23%; float: left; font-weight: bold; /*padding-top: 6px; font-size: 15px;margin-right:10px;*/"><div id="rank" style="/*overflow-x:auto;*/"><table style="width: 90%;font-size: 10px;" class="table table-striped table-bordered table-hover" id="dataTables-highest"><thead><tr><th style="text-align:left;font-size: 10px;">Grade Subject<br></th><th style="text-align:left;">Grade</th></tr></thead><tbody id="rank_body"><tr id="marks_high_details47"><td style="line-height: 1.1 !important;font-size:9px;">VALUE EDUCATION</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr><tr id="marks_high_details48"><td style="line-height: 1.1 !important;font-size:9px;">ART</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr><tr id="marks_high_details51"><td style="line-height: 1.1 !important;font-size:9px;">ACADEMIC PERFORMANCE</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr><tr id="marks_high_details52"><td style="line-height: 1.1 !important;font-size:9px;">CONDUCT</td><td style="line-height: 1.1 !important;font-size:9px;"></td></tr><tr id="marks_high_details53"><td style="line-height: 1.1 !important;font-size:9px;">SPOKEN ENGLISH</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr><tr id="marks_high_details54"><td style="line-height: 1.1 !important;font-size:9px;">NEATNESS</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr><tr id="marks_high_details55"><td style="line-height: 1.1 !important;font-size:9px;">PHYSICAL EDUCATION</td><td style="line-height: 1.1 !important;font-size:9px;">A</td></tr></tbody></table></div></div><div style="width: 50%; float: left; font-weight: bold; padding-top: 6px; font-size: 15px;margin-right: 0px;"></div><div style="width: 100%; float: left; font-weight: bold; padding-top: 6px; font-size: 15px;margin-right: 0px;"><div id="remarks" style="padding: 5px;"><span style="font-size: 14px;">Teachers Remarks:</span><br><span style="font-size: 12px; font-weight: 500;">AYUSH IS A WELL MANNERED CHILD.HE HAS DONE WELL IN HIS ACADEMICS.</span></div></div> <div id="promotion_detained" style="width: 100%; float: left;text-align:center;"><div style="display: inline-block;font-size: 14px;padding-left: 5px;padding-right: 5px;"> <input type="checkbox" name="vehicle" value="Bike"><span style="font-size: 14px;padding-left: 5px;padding-right: 5px;">PROMOTED</span> </div><div style="display: inline-block;font-size: 14px;padding-left: 5px;padding-right: 5px;"> <input type="checkbox" name="vehicle" value="Bike"><span style="font-size: 14px;padding-left: 5px;padding-right: 5px;">DETAINED</span></div></div></div><div style="width:100%;height:auto;float:left;text-align:center;padding-top: 50px;"><div style="width:33.33%;height:auto;float:left;"><span>Principals Signature</span></div><div style="width:33.33%;height:auto;float:left;"><span>Class Teachers Signature</span></div><div style="width:33.33%;height:auto;float:left;"><span>Parents Signature</span></div></div></div>');
});
var doc = new jsPDF();
/*var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};*/
$('#cmd').click(function () {
html2canvas($('#divprint')).then(function (canvas){
document.appendChild(canvas);
doc.addImage(canvas.toDataURL("image/png"),'PNG',0,0,210,297);
});
doc.save('sample-file.pdf');
});
</script>
</body>
</html>
我想這樣顯示：
但是這樣下載
1 個解決方案
解決方案1
0 2018-05-24 08:57:39
jsPDF不支持CSS。 如果您想保留您的視圖，可以使用html2cnavas。
編輯
html2canvas($('#content')).then(function (canvas){
$('#editor').append(canvas);
doc.addImage(canvas.toDataURL("image/png"),'PNG',0,0,210,297);
});
setTimeout(function(){
doc.save('sample-file.pdf');}
,5000);
我將此解決方案用於我的個人項目。 它像魅力一樣運作。
如何通過在html5中單擊按鈕將網頁轉換為pdf
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.