0

I am trying to print a report card with some data in html and jquery which is dynamically fetch. But on download, my pdf is not shown in right format.

on download show this error in console

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.


Uncaught (in promise) Error: Supplied data is not a JPEG

My code is

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

I want to show like this:

enter image description here

But it downloads like this

enter image description here

James Z
  • 12,209
  • 10
  • 24
  • 44
T.K
  • 33
  • 1
  • 1
  • 10
  • Possible duplicate of [Exporting PDF with jspdf not rendering CSS](https://stackoverflow.com/questions/25946275/exporting-pdf-with-jspdf-not-rendering-css) – Bibimission May 24 '18 at 13:04
  • i have already added – T.K May 24 '18 at 13:37
  • on download show this error in console "Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed." – T.K May 24 '18 at 13:38
  • it shows error now.... Uncaught (in promise) Error: Supplied data is not a JPEG – T.K May 24 '18 at 14:10
  • also show this error "Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed." – T.K May 25 '18 at 06:09
  • I edited my code below, check it out – Bibimission May 25 '18 at 10:05
  • I add the below code but it show again blank pdf and on download it shows error "Uncaught (in promise) TypeError: $(...).appendChild is not a function". Which script and link add in this page? – T.K May 28 '18 at 06:19

1 Answers1

0

jsPDF does not support CSS. If you want to keep exactly your view, you can use html2cnavas.

Edit

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

I used this solution for my personal project. It work like a charm.

Bibimission
  • 317
  • 5
  • 17
  • Yes, the html2canvas operation is asynchronous so the pdf is generated while it's not over. You have to use setTimeout to delay the operation PDF – Bibimission May 24 '18 at 12:22
  • I use below code setTimeout(function() { html2canvas($('#content')).then(function (canvas){ document.appendChild(canvas); doc.addImage(canvas.toDataURL("image/png"),'PNG',0,0,210,297); }); doc.save('sample-file.pdf'); }, 1000); still show blank page – T.K May 24 '18 at 12:39
  • Check if the canvas is drawn before you can download the PDF. If it doen't, increase the delay 5000 -> 10000 – Bibimission May 24 '18 at 12:41
  • i delayed for 10000 but still it will show blank pdf – T.K May 24 '18 at 12:44
  • I add the above code but it show again blank pdf and on download it shows error "Uncaught (in promise) TypeError: $(...).appendChild is not a function". Which script and link add in this page? – T.K May 28 '18 at 06:14
  • My bad. I don't use often jquery. It's not appendChild() it's append(). – Bibimission May 28 '18 at 07:25