1
A
回答
3
需要具有在jspdf-autotable嵌套表沒有原生支持。由於當前的bug無法在鉤子中使用圖形函數,因此使用鉤子做這件事變得相當混亂。這是一個解決方法,它記錄嵌套表格在drawCell鉤子中的位置,然後在循環之後在原始循環中繪製次表。
var elem = document.getElementById("generate");
elem.onclick = function() {
var doc = new jsPDF('p', 'pt');
var elem = document.getElementById('table');
var data = doc.autoTableHtmlToJson(elem);
var positions = [];
doc.autoTable(data.columns, data.rows, {
drawCell: function(cell, data) {
if (data.column.dataKey === 5) {
\t positions.push({x: cell.x, y: cell.y + 5});
}
},
columnStyles: {
\t 5: {columnWidth: 120}
},
bodyStyles: {
\t rowHeight: 100
}
});
positions.forEach(function(pos) {
var rows = [
["1", "2", "3", "4"],
["1", "2", "3", "4"],
["1", "2", "3", "4"],
["1", "2", "3", "4"]
];
doc.autoTable(["One", "Two", "Three", "Four"], rows, {
\t startY: pos.y,
\t margin: {left: pos.x},
tableWidth: 'wrap',
theme: 'grid',
styles: {
cellPadding: 3,
fontSize: 9,
rowHeight: 15
}
});
});
doc.save("table.pdf");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.33/jspdf.plugin.autotable.js"></script>
<button id="generate">Generate PDF</button>
<table id="table" style="display: none;">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Country</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>[email protected]</td>
<td>China</td>
<td></td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice</td>
<td>Henry</td>
<td>[email protected]</td>
<td>Ukraine</td>
<td></td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>[email protected]</td>
<td>Trinidad and Tobago</td>
<td></td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>[email protected]</td>
<td>Brazil</td>
<td></td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>[email protected]</td>
<td>United States</td>
<td></td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>[email protected]</td>
<td>Canada</td>
<td></td>
</tr>
</tbody>
</table>
相關問題
- 1. 使用jsPDF在PDF上生成表格
- 2. 使用jsPDF && jsPDF AutoTable將特定的HTML表格列轉換成PDF PDF格式
- 3. 使用帶格式化表格數據的jsPDF創建pdf
- 4. 如何使用jsPDF獲取PDF格式的表格行圖像?
- 5. 如何在JSPDF中將pdf格式應用於pdf。
- 6. 使用HTML嵌套表格
- 7. 如何在我的表格中使用嵌套類和列表?
- 8. PDF jspdf
- 9. 使用索引的先行嵌套表格是記錄和嵌套表格
- 10. 如何使用Html2Canvas和JsPDF連接pdf或pdf中的圖像?
- 11. 如何在表格中嵌套表格?
- 12. 使用jspdf渲染Svg到PDF使用jspdf
- 13. 使用jsPDF添加頁腳到pdf使用jsPDF
- 14. 模型和嵌套表格
- 15. jsPDF - 消除所選列和行PDF表格
- 16. 使用echarts和jspdf將圖表轉換爲pdf
- 17. jspdf - 保存pdf
- 18. 在HTML中格式化嵌套表格
- 19. 將html表格轉換爲使用jspdf的角度js中的pdf
- 20. jsPDF-AutoTable生成一個帶空單元格的PDF表格
- 21. 使用simple_form,nested_form和twitter-bootstrap嵌套表格格式
- 22. 使用jQuery從表格條帶中排除嵌套表格
- 23. JBehave中的嵌套表格
- 24. C#中的嵌套表格
- 25. 在Angulardart中使用嵌套列表創建表格
- 26. 不對齊在PDF文件通過使用jspdf自動錶
- 27. HTML和使用jspdf
- 28. 嵌套表格不使用偏差
- 29. 使用回形針的嵌套表格
- 30. 使用CSS的嵌套表格
感謝西蒙,我相信它會滿足我的要求。 – Prince
甜!對不起,目前這樣做的混亂代碼。在圖書館的某個時候會改進它。 –
真棒回答@SimonBengtsson –