JSPDF-Autotable colspan/rowpan 问题答案

【问题标题】：JSPDF-Autotable colspan/rowpan issueJSPDF-Autotable colspan/rowpan 问题
【发布时间】：2016-04-08 22:59:42
【问题描述】：

我有一个带有 rowspan/colspan 的 html 表。我正在使用 jspdf 和 jspdf-autotable 将该 html 表导出为 pdf。然而，保存的 pdf 有一个表，它在实际表中不包含行跨度/列跨度。如何使用 jspdf-autotable 执行列跨度/行跨度？我当前的代码是

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title id='title'>HTML Page setup Tutorial</title> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>

        <script type="text/javascript">
function myFunction()
{

 var doc = new jsPDF('p', 'pt');

    var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
    doc.autoTable(res.columns, res.data, {startY: 40});
    doc.save("Report.pdf");
}

</script>
    </head>
    <body>
 <table border='1' id="my-table">
<thead>
<tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>

</tr>
<tr>
<td >E</td>
<td >F</td>

</tr>
</tbody>
</table>
    <button type="button" onclick="myFunction()">Click Me!</button>
    </body>
</html>

【问题讨论】：

标签： jspdf jspdf-autotable

【解决方案1】：

编辑：库的第 3 版支持行跨度和列跨度，无需 hack

插件不支持从 html 自动移植 colspans 和 rowspans。但是，您可以手动进行。看看这个example（演示是here）。

【讨论】：

发布代码比可能不再显示解决方案的链接更好

【解决方案2】：

与此同时，该插件似乎支持从 HTML 中解析 colspan。这应该有效：

<td colspan="2">Colspan</td>

【讨论】：