如何使用 jsPDF 和 autoTable 在每个页面上添加表格作为标题答案

【问题标题】：How add a table as header on each page with jsPDF and autoTable如何使用 jsPDF 和 autoTable 在每个页面上添加表格作为标题
【发布时间】：2017-05-16 11:11:21
【问题描述】：

我将在 pdf 上有一个灵活的表格...所以如果它非常大，autoTable 会将其拆分为不同的页面...对吗？在那一点上，如果表格将被拆分为不同的页面，我想在每个页面上放置一个表格作为 HEADER...

我尝试了 beforePageContent 和 autoTableAddPageContent 的钩子，但我无法让它工作......我在里面调用 doc.autoTable：

let columns = [
  {title: "ID", dataKey: "id"},
  {title: "Name", dataKey: "name"},
  {title: "Email", dataKey: "email"}
];

let data = [
  {id: 1, name: "A", email: "email@host.com"}, 
  {id: 2, name: "B", email: "email@host.com"}
];

let options = { startY: 30 };

doc.autoTable(columns, data, options);

我有什么选择？

我曾使用 jsPDF 和 autoTable，所以了解基础知识

谢谢

【问题讨论】：

重复是什么意思？每页上的同一张表？
是的。如果我需要将该表格放在每一页的内容之前

标签： jspdf jspdf-autotable

【解决方案1】：

如果您想在每个页面上添加一个表格，您可以简单地调用doc.autoTable 多次。这是一个简单的例子：

var doc = new jsPDF('p', 'pt');
var headers = ["Header 1", "Header 2"];
var rows = [["Cell 1", "Cell 2"], ["Cell 1", "Cell 2"]];

doc.autoTable(headers, rows);
doc.text("Some content...", 40, doc.autoTableEndPosY() + 40);

doc.addPage();

doc.autoTable(headers, rows);
doc.text("Some content...", 40, doc.autoTableEndPosY() + 40);


doc.save("table.pdf");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.1.0/jspdf.plugin.autotable.js"></script>

【讨论】：

但是我的数据大小是灵活的，它可以有 1 行或 500.. 所以我不知道它会有多少页...不应该是自动的吗？
数据是否灵活无关紧要。以上方法你试过了吗？
是的，但我不能。我什么时候应该调用 doc.addPage() ？
我想我误解了你的问题。你想在每页上放两个表吗？为什么 beforePageContent 不起作用？
是的，我想我们不理解，呵呵，我将在 pdf 上有一个灵活的表格......所以如果它非常大，autoTable 会将它分成不同的页面......对吗？在那一点上，如果表格将被拆分为不同的页面，我想在每个页面上放置一个表格作为 HEADER...

【解决方案2】：

要使用 jsPDF-Autotable 在每个页面上显示表头，我们可以使用以下选项。

showHead: 'everyPage'

jsPDF-AutoTable 官方文档链接 https://github.com/simonbengtsson/jsPDF-AutoTable#other-options

【讨论】：