时间戳

首页 > 解决方案 > 带有addPage的jsPDF html方法在生成的PDF中拆分页面

javascript - 带有addPage的jsPDF html方法在生成的PDF中拆分页面

问题描述

我正在使用jsPDF 的 html方法为一些包含多个段落的 html 生成 PDF，p每个段落p包含 50-500 之间的单词。PDF 是使用我定义的样式正确生成的。我面临的唯一问题是p标签的内容溢出到 PDF 中的新页面时会截断部分文本，如下所示：

在此处输入图像描述

为了解决这个问题，我需要在addPage我的代码中引入我希望插入的“分页符”。这是一个addPage适用于jsPDF 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 会引发跨域错误，因此您需要在 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/html2canvas@1.0.0-alpha.12/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 的版本在这里很重要。有关更多信息，请参阅此内容。

标签： javascripthtmljqueryjspdfpage-break

解决方案

使用这个，特别是模板（第 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 进行页面缩放时遇到的另一个问题。

推荐阅读