我正在将表格转换为pdf,如果将pdf转换为纵向,则生成的PDF不会出现问题。
但是表很宽,所以我一收到以下错误,就需要将其切换为横向:
TypeError:单元格未定义[了解更多] jspdf.plugin.autotable.js:690:17
可悲的是,由于该表属于机密工作,因此无法共享该表(因此将创建本地pdf),但这是我正在使用的脚本。
$('#btnExportPDF').on('click', function(e){
e.preventDefault();
let source = document.getElementById('iframeReport').contentWindow.document.getElementById('tblReport');
$('#divHiddenTable').html(source.outerHTML);
console.log(source);
let doc = new jsPDF({format: 'a4', unit: 'pt', orientation: 'l'});//change l to p and it works
console.log('PDF Obj');
doc.autoTable({html: '#tblReport'});
console.log('PDF autoTable');
doc.save("RegionalDirectorsWriteOffReviewExport.pdf");
console.log('PDF save');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.9/jspdf.plugin.autotable.js"></script>
经过更多调查后,看来如果我从下表中删除“ OFFICE 3”部分,它将起作用,但其中没有任何作用。
<table class="table table-striped" id="tblReport">
<thead>
<tr>
<th>Client
Code</th>
<th>Client
Partner</th>
<th>Client
Name</th>
<th> </th>
<th align="center">Billed</th>
<th align="center">WIP
W/O</th>
<th align="center">Profit/
Loss</th>
<th>Recovery</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr class="OfficeHeader">
<th colspan="9">City 1</th>
</tr>
<tr>
<td>123456</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHOAMI</td>
<td class="text-right">2,069.58</td>
<td class="text-right">4,609.66</td>
<td class="text-right">-2,540.08</td>
<td class="text-right">44.89</td>
<td></td>
</tr>
<tr>
<td>45384</td>
<td>NAME</td>
<td>COMPANY 2</td>
<td>WHOAMI</td>
<td class="text-right">195.00</td>
<td class="text-right">4,559.74</td>
<td class="text-right">-4,364.74</td>
<td class="text-right">4.27</td>
<td></td>
</tr>
<tr>
<td>852136</td>
<td>NAME</td>
<td>COMPANY 3</td>
<td> </td>
<td class="text-right">600.00</td>
<td class="text-right">3,109.00</td>
<td class="text-right">-2,509.00</td>
<td class="text-right">19.29</td>
<td></td>
</tr>
<tr>
<td>111</td>
<td>NAME</td>
<td>COMPANY 4</td>
<td>WHOAMI</td>
<td class="text-right">0.00</td>
<td class="text-right">1,677.50</td>
<td class="text-right">-1,677.50</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr>
<td>123654</td>
<td>NAME</td>
<td>COMPANY</td>
<td>WHOAMI</td>
<td class="text-right">0.00</td>
<td class="text-right">1,169.75</td>
<td class="text-right">-1,169.75</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">2,864.58</div></td>
<td class="text-right"><div class="double-border">15,125.65</div></td>
<td class="text-right"><div class="double-border">-12,261.07</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
<tr class="OfficeHeader">
<th colspan="9">City 2</th>
</tr>
<tr>
<td>A-569</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHOIZYOU</td>
<td class="text-right">2,175.00</td>
<td class="text-right">4,361.72</td>
<td class="text-right">-2,186.72</td>
<td class="text-right">49.86</td>
<td>Overrun against a thing that we don't know so can't put here</td>
</tr>
<tr>
<td>D/6666</td>
<td>NAME</td>
<td>COMPANY</td>
<td>WHOIZTHIS</td>
<td class="text-right">1,300.00</td>
<td class="text-right">2,371.01</td>
<td class="text-right">-1,071.01</td>
<td class="text-right">54.82</td>
<td>Taken on from previous prtner and manager</td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">3,475.00</div></td>
<td class="text-right"><div class="double-border">6,732.73</div></td>
<td class="text-right"><div class="double-border">-3,257.73</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
<tr class="OfficeHeader">
<th colspan="9">OFFICE 3</th>
</tr>
<tr>
<td>GFDGDFGF</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHO</td>
<td class="text-right">2,910.00</td>
<td class="text-right">8,385.21</td>
<td class="text-right">-5,475.21</td>
<td class="text-right">34.70</td>
<td></td>
</tr>
<tr>
<td>KJHKJHKJ</td>
<td>NAME</td>
<td>COMPANY Limited </td>
<td>WHO</td>
<td class="text-right">2,310.00</td>
<td class="text-right">4,733.76</td>
<td class="text-right">-2,423.76</td>
<td class="text-right">48.79</td>
<td></td>
</tr>
<tr>
<td>OIOUIO</td>
<td>NAM,E</td>
<td>COMPANY</td>
<td>WHOZ</td>
<td class="text-right">0.00</td>
<td class="text-right">2,110.25</td>
<td class="text-right">-2,110.25</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">5,220.00</div></td>
<td class="text-right"><div class="double-border">15,229.22</div></td>
<td class="text-right"><div class="double-border">-10,009.22</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
</tbody>
<tfoot>
<tr style="height: 2px !important; overflow: hidden !important;">
<td colspan="4"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; overflow: hidden; !important;"> </div></td>
<td colspan="3"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; background-color: #e7ebee; overflow: hidden !important;"> </div></td>
<td colspan="2"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; overflow: hidden; !important;"> </div></td>
</tr>
<tr>
<td colspan="4" class="text-right">AVG</td>
<td class="text-right">1,319.98</td>
<td class="text-right">3,526.59</td>
<td class="text-right">-2,206.61</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4" class="text-right">Totals</td>
<td class="text-right"><div class="double-border">27,719.58</div></td>
<td class="text-right"><div class="double-border">74,058.42</div></td>
<td class="text-right"><div class="double-border">-46,338.84</div></td>
<td colspan="2"> </td>
</tr>
</tfoot>
</table>
示例JSFiddle https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css