Viswa
Reputation: 3211
Generating PDF from complex html table using JSPDF
I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.
You can see in this Fiddle, What i tried so far.
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
Problem is, when i try to generate pdf i am getting
Uncaught TypeError: Cannot read property 'name' of undefined
Is it possible to use JSPDF for this kind of complex table or will it only work for a simple table.
EDIT: Solved this by different way, This is what i did
- I converted HTML Table into Canvas html2canvas.js
- You can get canvas as Base64 image using
canvas.toDataURL("image/jpeg") - Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.
If you need charts and images as part of PDF -> charts and images as part of PDF
Credit goes to my brain.
Upvotes: 8
Views: 12925
Answers (4)
bingecoder
Reputation: 141
I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:
while (j < tableRow.cells.length && headers[j] != undefined) {
Which was originally:
while (j < tableRow.cells.length) {
Alternatively, I could make it go away by adding another td to the tr it was processing (it only had one td, which apparently caused the problem).
I'm thinking I'll try to submit it as a bug fix.
Upvotes: 7
Mahendra Salve
Reputation: 96
Remove All the colspan Attribute And Rowspan Attribute From td Tag And Apply blank td then try.
Its Working and Generate Pdf (for checking put this code in your file)
<div id="inspectionReport">
<div class="title">
<p class="appname">Title</p>
<p>REPORT</p>
</div>
<p class="date">Revised on 9/3/2013</p>
<p style="float:right;">
<button onclick="javascript:demoFromHTML();">Generate Pdf</button>
</p>
<table style="width:100%">
<tbody>
<tr>
<td>A No : <span id="a">1</span>
</td>
<td>B / No : <span id="b">2</span>
</td>
<td>C Date: <span id="c"></span>
</td>
</tr>
<tr>
<td>A No : <span id="d">3</span>
</td>
<td>B name: <span id="e">4</span>
</td>
<td>
<p>C [ X ] D [ ]</p>
<p>G Date : <span id="f"></span>
</p>
</td>
</tr>
<tr>
<td>O No : <span id="yy"></span>
</td>
<td>Orgin : <span id="yyr"></span>
</td>
<td>S : [ X ] G [ ] J [ X ] Y [ X ] G</td>
</tr>
<tr>
<td></td>
<td>Name : <span id="QW"></span>
</td>
<td>xc : <span id="FG"></span>
</td>
</tr>
<tr>
<td>No : <span id="gg"></span>
</td>
<td>company : <span id="gg"></span>
</td>
<td>type t [ ] A [ X ] No</td>
</tr>
<tr>
<td>Quen : <span id="odrQuan"></span>
</td>
<td>Sh : <span id="shipQuan"></span>
</td>
<td>Run [ ] Int [ X ]. Shi [ ] No.</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Title:</td>
</tr>
<tr align="center">
<td>FY</td>
<td>CJK</td>
<td>SL</td>
<td>F</td>
<td>P</td>
</tr>
<tr align="center">
<td><span id="fyavail">20</span>
</td>
<td><span id="ck">40</span>
</td>
<td><span id="sl">70</span>
</td>
<td><span id="finish">100</span>
</td>
<td><span id="pack">50</span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody id="dhtml">
<tr>
<td class="boldFont">SAPC:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>ATU: <span id="aqluser"></span>
</td>
<td>SS : <span id="sampleSize"></span>
</td>
<td></td>
<td >MA : <span id="majallowed"></span>
</td>
<td></td>
<td>MAS : <span id="minallowed"></span>
</td>
</tr>
<tr>
<td>DT</td>
<td align="center">No.</td>
<td>DD</td>
<td align="center">C</td>
<td align="center">Max</td>
<td align="center">Min</td>
</tr>
<tr>
<td >FY</td>
<td align="center">1</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">22</td>
<td align="center">24</td>
<td align="center">246</td>
</tr>
<tr>
<td >SKL</td>
<td align="center">1</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
</tr>
<tr>
<td align="center">2</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
<td></td>
</tr>
<tr>
<td align="right">ST :</td>
<td></td>
<td></td>
<td align="center">28</td>
<td align="center">26</td>
<td align="center">468</td>
</tr>
<tr>
<td >A</td>
<td align="center">1</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">66</td>
<td align="center">890</td>
<td align="center">66</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right" class="boldFont">Tot :</td>
<td align="center">116</td>
<td align="center">940</td>
<td align="center">780</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tr class="boldFont">
<td >Title 3</td>
<td align="center">ASD</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>C : <span id="tolcartons"></span>
</td>
<td>S : <span id="samsize"></span>
</td>
<td>M : <span id="allowmajor"></span>
</td>
<td align="center">WPZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>D No.</td>
<td>D type</td>
<td>NOF</td>
<td>C</td>
<td>Spev</td>
<td>Act</td>
<td>diff</td>
</tr>
<tr>
<td>1</td>
<td>F/Y</td>
<td><span id="nooffy"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>S/K/L</td>
<td><span id="skl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Fin</td>
<td><span id="finl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">TM:</td>
<td><span id="totmajores"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Comment:<span id="comment"></span>
</td>
</tr>
</table>
<table style="width:100%">
<tbody>
<tr>
<td >outcome</td>
<td>A. V</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>B. M</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>C. P</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td>CC A s</td>
</tr>
<tr>
<td><span id="comcorraction"></span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Title 4 :</td>
<td></td>
</tr>
<tr>
<td>TWT [ X ] Pass [ ] Fail</td>
<td>STO [ ] Pass [ X ] Fail</td>
</tr>
<tr>
<td>PAS [ ] A [ X ] NA</td>
<td>SR [ ] Yes [ X ] No [ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Signatures:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p><span id="qaauditNo">.</span> <span id="qaadate" class="sdate">.</span>
</p>
<p>QANo <span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="mp">.</span> <span id="mpdate" class="sdate">.</span>
</p>
<p>MP<span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="supr">.</span> <span id="supdate" class="sdate">.</span>
</p>
<p>Sup<span class="sdate">Date</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="boldFont">Note: ABCDEFG</p>
<p class="boldFont">Note: ABCDEFG</p>
<div class="title boldFont">QC / MED / FAC / FOR</div>
Upvotes: 1
xErik
Reputation: 21
- Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
- Select TABLES in the top menu of the Playground.
- Scroll down the example pdf, there is a section illustrating Colspan-capabilities.
Upvotes: 2
Des Horsley
Reputation: 1888
I stepped through the code using the chrome debugger, and it looks like jspdf is is having an issue with colspan in the first row of the table.
It seems like a bug in their library, where you can't use col span in the header or first row of each table.
Upvotes: 1
Related Questions
- Create pdf using jsPDF with formatted Table data
- Export HTML table to pdf using jspdf
- How to print properly HTML table do PDF using jspdf.js?
- Error while generating PDF out of HTML Table using jsPDF & autotable
- pdfmake generate PDF from Long HTML Table
- Design in table in pdf with jspdf?
- convert table data into PDF with JSPDF and AutoTable
- convert just specific HTML table columns to PDF using jsPDF && jsPDF AutoTable
- rendering tables with jsPDF
- Generate table on PDF with jsPDF