从 HTML/CSS 代码生成所有页面都有边距的 PDF

Question

我需要使用 JavaScript 将长度可变的 HTML 页面转换为 PDF。我尝试使用多种方法，例如 Window.print、jsPDF 或 html-to-pdf-js。但我总是遇到同样的问题：当内容太大无法容纳在一个页面中时，会生成一个新的页面，而页面之间没有任何边距。

这是我一直在尝试的一个例子：

var doc = new jspdf.jsPDF("p", "mm", "a4");
doc.html(document.body, {
    callback: function (doc) {
        doc.save();
    },
});

不希望的结果：

Answer 1

解决使用 jspdf.jsPDF 时生成的多个页面之间没有任何空白的问题的一种方法是在开始新页面的内容之前添加分页符。您可以使用 jsPDF 对象的 addPage() 方法来实现此目的。

var doc = new jspdf.jsPDF("p", "mm", "a4");
var pageCount = 1;
doc.html(document.body, {
  callback: function (doc) {
    if (pageCount < doc.internal.getNumberOfPages()) {
      doc.addPage();
      pageCount++;
    }
    doc.save();
  },
});

在此代码片段中，我们首先将 pageCount 变量初始化为 1 以跟踪添加到 PDF 的页数。然后，在回调函数中，我们检查生成的 PDF 中的页数是否大于当前 pageCount。如果是这样，我们使用 jsPDF 对象的 addPage() 方法添加一个新页面，并增加 pageCount 变量。

通过在开始新页面的内容之前添加分页符，我们确保生成的 PDF 中的页面之间有边距。