使用JSPDF从复杂的HTML表格生成PDF

8
我正在尝试使用JSPDF从HTML生成PDF,其中HTML包含一个复杂的表格,下面附有图片。
你可以在这个Fiddle中查看我目前所做的工作。
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);

问题是,在我尝试生成PDF时,出现了以下错误:
Uncaught TypeError: Cannot read property 'name' of undefined

这种复杂的表格能否使用JSPDF呢?还是只适用于简单的表格?
编辑:我通过不同的方法解决了这个问题,以下是我的做法:
1. 将HTML表格转换为Canvas(html2canvas.js)。 2. 使用canvas.toDataURL("image/jpeg")将Canvas转换为Base64图像。 3. 我使用JSPDF创建一个空白PDF,并使用JSPDF的addImage功能将Base64图像嵌入到PDF中。
如果需要将图表和图片作为PDF的一部分,请参考链接:charts and images as part of PDF 功劳归于我的大脑。

你好 @Viswa,我也有同样的问题。能否请你更新一下Fiddle,这样我就可以更清楚地了解你的解决方案。谢谢。 - Raghavendra Shivhare
嗨Viswa,我遇到了和你一样的问题,因为我需要展示一个复杂的表格。我正在尝试你的方法,但无论如何都会得到“TypeError:html2canvas不是一个函数”的错误提示。我已经包含了这个js文件,并且在控制台中搜索时也能找到它。你能给我一些建议吗?先谢谢了! - Coder
@Bhagyashri 你确定在控制台中获取到了 html2canvas 函数吗?还有一件事是,如果浏览器找不到 html2canvas,它会抛出“html2canvas未定义”的错误,但你却得到了 TypeError。 - Viswa
我确定在控制台中获取了html2canvas。现在我已经解决了这个问题,但是“onrendered”没有被调用。我没有任何错误。因此,我发布了一个问题。 - Coder
请问您能否发送您的更新代码,以便我们解决类似的问题? - austin
4个回答

7
我通过修改 jspdf.debug.js(版本为1.2.61)中的第6203行来解决了此问题:
while (j < tableRow.cells.length && headers[j] != undefined) {

原本是:

while (j < tableRow.cells.length) {

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

我想我会尝试将其作为错误修复提交。


很好,请将其提交为错误报告。这将有助于其他人。 - Viswa

2
  1. 查看pdfmake Playground(它应该可以在浏览器中运行,并且是MIT许可证)。
  2. Playground的顶部菜单中选择TABLES。
  3. 向下滚动示例PDF,其中有一个展示Colspan功能的部分。

这个colspan示例展示了如何从JavaScript对象生成PDF,而不是HTML。 - John29

1

移除所有td标签中的colspan和rowspan属性,并应用空白的td标签,然后尝试。

它正在工作并生成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>

1

我使用Chrome调试器逐步执行代码,并发现jspdf在表格的第一行中使用colspan时出现了问题。

这似乎是他们库中的一个错误,即您无法在每个表格的标题或第一行中使用colspan。


好的。谢谢。还有其他方法吗? - Viswa
我不确定,您可以设计表单而不使用colspan。使用CSS隐藏适当的单元格边框? - Des Horsley
我看不到其他选项,插件似乎还不支持这个功能。你可以联系开发者或分叉存储库并自己进行更改。 - Des Horsley

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接