使用JSPDF从复杂的html表生成PDF

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

我正在尝试使用JSPDF从html生成pdf，而html有一个复杂的表，下面添加了图像。

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

问题是，当我尝试生成pdf时

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.

是否可以将JSPDF用于这种复杂的表，或者它只适用于简单的表。

EDIT: Solved this by different way, This is what i did

编辑:用不同的方法解决这个问题，这就是我所做的

1. I converted HTML Table into Canvas html2canvas.js
2. 我将HTML表转换为画布html2canvas.js
3. You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
4. 您可以使用canvas. todataurl(“image/jpeg”)获得canvas作为Base64映像
5. Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.
6. 一旦我获得了Base64图像，使用JSPDF创建了空的PDF，并使用JSPDF的添加特性，我就可以在PDF中嵌入Base64图像。

Credit goes to my brain.

功劳记在我的脑子里。

4 个解决方案

#1

1. Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
2. 签出pdfmake游乐场(它应该在浏览器中工作，并获得mitc许可)。
3. Select TABLES in the top menu of the Playground.
4. 在操场的顶部菜单中选择表格。
5. Scroll down the example pdf, there is a section illustrating Colspan-capabilities.
6. 向下滚动示例pdf，有一个小节说明colston功能。

#2

I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:

我通过修改jspdf.debug.js(版本1.2.61)的第6203行来修复这个问题:

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

或者，我可以通过向正在处理的tr中添加另一个td来消除它(它只有一个td，这显然导致了问题)。

I'm thinking I'll try to submit it as a bug fix.

我想我将尝试提交它作为一个bug修复。

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

我使用chrome调试器遍历了代码，看起来jspdf在表的第一行有colspan的问题。

It seems like a bug in their library, where you can't use col span in the header or first row of each table.

在它们的库中，它看起来像一个bug，在每个表的头或第一行中都不能使用col span。

#4

Remove All the colspan Attribute And Rowspan Attribute From td Tag And Apply blank td then try.

从td标记中删除所有colspan属性和Rowspan属性并应用空白td，然后尝试。

Its Working and Generate Pdf (for checking put this code in your file)

它工作并生成Pdf(用于检查将此代码放入您的文件中)

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