javascript - 如何在JSPDF中确保分页时内容不被切割？

Question

JSPDF如何能保证分页时，内容不被切开，大家又是如何实现的呢？
目前我是通过网上最常见的截图方式（尺寸是A4纸大小），然后再生成pdf。但有个问题，因为这个div容器中的内容不可控，有的时候图片或文字或一个div里边的内容就被切开了，求大神指导，最好原生的JS实现（最好有这个方式的解决方案，多谢各位）。

还有个思路就是把div根据内容，直接生成出多个div，然后jspdf直接遍历这些div直接导出，这样文字和图片倒是可以保证不被分割，但有的css样式会在下一个div刚开始的时候就会不生效，例如：第一个div长度够了，第二个长度开始的时候有一个 <h2>第二段开始</h2>，这样根据字符的长度计算的，就可能把h2留在了第一个div，里边内容在第2个div，就会失去样式。

Answer 1

在JSPDF中确保分页时内容不被切割，可以考虑以下方法：

1. 使用CSS样式控制内容布局：通过设置适当的CSS样式，如page-break-before、page-break-after和page-break-inside，可以控制内容在分页时的行为。这些样式可以应用于元素或其父元素，以确保内容在分页时不会被切割。
2. 使用JSPDF的自动分页功能：JSPDF提供了自动分页的功能，可以在内容超出页面范围时自动进行分页。您可以使用addPage()方法在需要分页的位置添加新页面。
3. 控制内容长度和换行：根据内容的长度和换行规则，合理控制内容的长度和换行位置，可以避免内容被切割。可以通过CSS样式中的word-wrap、overflow和white-space等属性来控制内容的换行和溢出行为。
4. 图片和元素的处理：对于图片和某些特殊的元素，可能需要采取特殊处理，以避免在分页时被切割。例如，对于图片元素，可以使用绝对定位将其固定在某个位置，避免因页面布局变化而产生切割。
5. 使用第三方库：除了JSPDF本身的功能，还可以考虑使用一些第三方库来帮助处理分页和内容切割的问题。例如，html2canvas可以将HTML元素转换为Canvas，然后再生成PDF，这样可以更好地控制内容的布局和分页。

希望这些方法能够帮助您解决问题。如果您需要更具体的代码示例或进一步的帮助，请提供更多细节。