使用jspdf和jspdf-autotable在pdf中嵌套表-Java 学习之路

如何使用jspdf和jspadf-autotable在PDF中实现嵌套表？类似于下图的东西：

Nested tables in pdf

1 回答

在jspdf-autotable中拥有嵌套表没有本机支持 . 并且使用钩子做这件事变得相当混乱，因为当前的错误你不能在钩子中使用图形功能 . 下面是一个解决方法，它记录了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) {
      	positions.push({x: cell.x, y: cell.y + 5});
      }
    },
    columnStyles: {
    	5: {columnWidth: 120}
    },
    bodyStyles: {
    	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, {
    	startY: pos.y, 
    	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>dmoore0@furl.net</td>
        <td>China</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">2</td>
        <td>Janice</td>
        <td>Henry</td>
        <td>jhenry1@theatlantic.com</td>
        <td>Ukraine</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">3</td>
        <td>Ruth</td>
        <td>Wells</td>
        <td>rwells2@constantcontact.com</td>
        <td>Trinidad and Tobago</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">4</td>
        <td>Jason</td>
        <td>Ray</td>
        <td>jray3@psu.edu</td>
        <td>Brazil</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">5</td>
        <td>Jane</td>
        <td>Stephens</td>
        <td>jstephens4@go.com</td>
        <td>United States</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">6</td>
        <td>Adam</td>
        <td>Nichols</td>
        <td>anichols5@com.com</td>
        <td>Canada</td>
        <td></td>
    </tr>
    </tbody>
</table>

回复于 2024-04-29T09:33:19+08:00

使用jspdf和jspdf-autotable在pdf中嵌套表

1 回答

相关问题