jsPDF -带有rowspan和colspan属性的头表

jsPDF - Header table with rowspan and colspan attributes

本文关键字：属性 colspan 带有 rowspan jsPDF      更新时间：2023-09-26

在这个例子中，我需要导出各自的表，但是由于某种原因，生成的pdf文件不能识别rowspan和colspan属性，生成的表看起来不一样。

HTML视图
<table id="table" border="1">
<thead>
  <tr>
    <th rowspan="2">ID</th>
    <th colspan="2">Names</th>
    <th rowspan="2">Email</th>
    <th colspan="2">Addresses</th>
  </tr>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>IP-address1</th>
    <th>IP-address2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td align="right">1</td>
    <td>Donna</td>
    <td>Moore</td>
    <td>dmoore0@furl.net</td>
    <td>211.56.242.221</td>
    <td>211.56.242.221</td>
  </tr>
  <tr>
    <td align="right">2</td>
    <td>Janice </td>
    <td>Henry</td>
    <td>jhenry1@theatlantic.com</td>
    <td>38.36.7.199</td>
    <td>38.36.7.199</td>
  </tr>
  <tr>
    <td align="right">3</td>
    <td>Ruth</td>
    <td>Wells</td>
    <td>rwells2@constantcontact.com</td>
    <td>19.162.133.184</td>
    <td>19.162.133.184</td>
  </tr>
  <tr>
    <td align="right">4</td>
    <td>Jason</td>
    <td>Ray</td>
    <td>jray3@psu.edu</td>
    <td>10.68.11.42</td>
    <td>10.68.11.42</td>
  </tr>
  <tr>
    <td align="right">5</td>
    <td>Jane</td>
    <td>Stephens</td>
    <td>jstephens4@go.com</td>
    <td>47.32.129.71</td>
    <td>47.32.129.71</td>
  </tr>
  <tr>
    <td align="right">6</td>
    <td>Adam</td>
    <td>Nichols</td>
    <td>anichols5@com.com</td>
    <td>18.186.38.37</td>
    <td>18.186.38.37</td>
  </tr>
  <tr>
    <td align="right">6</td>
    <td>Adam</td>
    <td>Nichols</td>
    <td>anichols5@com.com</td>
    <td>18.186.38.37</td>
    <td>18.186.38.37</td>
  </tr>
  <tr>
    <td align="right">6</td>
    <td>Adam</td>
    <td>Nichols</td>
    <td>anichols5@com.com</td>
    <td>18.186.38.37</td>
    <td>18.186.38.37</td>
  </tr>
</tbody>

脚本

function createPDF(){
    var doc = new jsPDF('p', 'pt', 'letter');
    var IDtable = document.getElementById('table');
    var tableSource = doc.autoTableHtmlToJson(IDtable);
    doc.autoTable(tableSource.columns, tableSource.data, {startY: doc.autoTableEndPosY() + 40, theme: 'grid'});
    doc.save("file.pdf")
}

在最新版本中，行间距和colspan是自动处理的，所以这应该足够了。

var doc = new jsPDF();
doc.autoTable({html: '#table'});
doc.save("file.pdf")
相关文章：