[jsPDF html方法，使用addPage在生成的PDF中拆分页面

Question

我正在使用jsPDF's html方法来为某些HTML生成PDF，该HTML由多个段落p组成，每个p包含50-500之间的单词。 PDF是使用我定义的样式正确生成的。我面临的唯一问题是p标记的内容溢出到PDF的新页面时，切断了部分文本，如此处所示：

为了解决这个问题，我需要在代码中引入addPage，以便在希望的位置插入“分页符”。这是addPage的示例，可与jsPDF's text函数一起使用：

var doc = new jsPDF('p', 'pt', 'letter');
doc.text(20, 20, 'first text');
doc.addPage();
doc.text(20, 20, 'second text');
doc.addPage();
doc.text(20, 20, 'third text');
doc.save();

我想对html做同样的事情，这是我使用的代码：

var doc = new jsPDF('p', 'pt', 'letter');
doc.html($("#p1")[0], {
    callback: function (doc) {
        doc.addPage('letter', 'p');

        doc.html($("#p2")[0], {
            callback: function (doc) {
                doc.save();
            }
        });
    }
});

上面将根据需要生成一个包含2页内容的PDF。但是，假定在第二页上的内容在第一页上，位于第一页内容的顶部。换句话说，#p2内容粘贴在#p1内容的顶部。

这里是代码段，但请注意，当您尝试运行代码时，SO抛出跨域错误，因此您将需要在外部运行以下代码：

function wrap() {
  var doc = new jsPDF('p', 'pt', 'letter');
  doc.html($("#p1")[0], {
    callback: function(doc) {
      doc.addPage('letter', 'p');
      doc.html($("#p2")[0], {
        callback: function(doc) {
          doc.save();
        }
      });
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.js"></script>

<button id="btn" onclick="wrap()">Test</button>
<div id="lipsum">
  <p id="p1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
    at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
    ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
    efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
  </p>
  <p id="p2">
    Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
  </p>
  <p id="p3">
    In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
    dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
  </p>

</div>

请注意，用于html2canvas js的版本在这里很重要。有关更多信息，请参见this。

Answer 1

使用this，特别是模板（第125-150行），我找到了一种将第二个（后续）页面“移动”到正确的y（y：792）坐标的解决方案：

function wrap() {
  var doc = new jsPDF('p', 'pt', 'letter');
  doc.html($("#p1")[0], {
    callback: function(doc) {
      doc.addPage('letter', 'p');
      doc.html($("#p2")[0], {
        callback: function(doc) {
          doc.save();
        }, y:792
      });
    }, html2canvas: {scale: 1}
  });
}

其中792是单个字母页面的垂直长度。换句话说，p2在具有定义的y轴坐标的位置上渲染。

一个人可以更新上面的代码（递归函数）以针对多个p元素执行此操作，甚至可以根据其他条件拆分页面。我希望这对某人有帮助。

注意：html2canvas: {scale: 1}用于解决我在移动设备上生成的PDF页面缩放时遇到的另一个问题。