Question

我正在尝试使用html和jquery中的一些数据打印一张报告卡，这些数据是动态提取的。但是在下载时，我的pdf没有以正确的格式显示。

下载在控制台中显示此错误

未捕获（在承诺中）DOMException：无法执行＆＃39; appendChild＆＃39; on＆＃39; Node＆＃39;：只允许文档中的一个元素。

未捕获（承诺）错误：提供的数据不是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>

我想这样表现出来：

但它会像这样下载

Answer 1

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

我将此解决方案用于我的个人项目。它就像一个魅力。

Html to pdf转换按钮点击jquery

1 个答案: