jsPDF - 包含rowspan和colspan属性的标头表

时间:2016-09-30 18:01:55

标签: javascript jspdf-autotable

基于此example我需要导出相应的表但由于某种原因生成的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")
}

1 个答案:

答案 0 :(得分:1)

在最新版本中,将自动处理rowpans和colspans,因此应该足够了。

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