使用JSPDF从复杂的html表生成PDF
我正在尝试使用JSPDF从html生成pdf，并且html有一个复杂的表格，下面添加了图片。
你可以在this 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用于这种复杂的表，或者它只适用于简单的表。
修改 以不同方式解决这个问题，这就是我做的事情
- 我将HTML表转换为Canvas html2canvas.js
- 您可以使用
canvas.toDataURL("image/jpeg"） 将画布作为Base64图像
- 一旦我获得了Base64图像，使用JSPDF创建了空PDF并使用JSPDF的addImage功能，我设法将Base64图像嵌入到PDF中。
信用归于我的大脑。
3 个答案:
答案 0 :(得分：2)
- 签出pdfmake Playground（它应该在浏览器中工作，并且是麻省理工学院许可的。）
- 在 Playground 的顶部菜单中选择TABLES。
- 向下滚动示例pdf，有一节说明Colspan功能。
答案 1 :(得分：1)
我使用chrome调试器逐步完成了代码，看起来jspdf在表的第一行中存在colspan问题。
这似乎是他们库中的一个错误，你不能在每个表的标题或第一行中使用col span。
答案 2 :(得分：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？