Generating PDF from complex html table using JSPDF

11,585

Solution 1

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.

Solution 2

  1. Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
  2. Select TABLES in the top menu of the Playground.
  3. Scroll down the example pdf, there is a section illustrating Colspan-capabilities.

Solution 3

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.

Solution 4

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>
Share:
11,585

Related videos on Youtube

Viswa
Author by

Viswa

Top user in india for sencha-touch Top 2nd user for sencha-touch in the world

Updated on September 23, 2022

Comments

  • Viswa
    Viswa about 1 year

    I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.

    enter image description here

    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

    1. I converted HTML Table into Canvas html2canvas.js
    2. You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
    3. 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.

  • Viswa
    Viswa over 8 years
    Ok. Thanks. Is there any other way ?
  • Des Horsley
    Des Horsley over 8 years
    I'm not sure, you could design your form with out using colspan. Use css to hide the appropriate cell borders?
  • Des Horsley
    Des Horsley over 8 years
    I can't see any other options, it looks like the plugin just doesn't support this feature yet. You could contact the developer, or fork the repo and make the changes yourself.
  • John29
    John29 almost 8 years
    This colspan example shows how to generate PDF from a JavaScript object, not HTML.
  • Viswa
    Viswa over 7 years
    Cool, please submit it as a bug. Will help others.