如何根据 HTML 中的内容智能地插入分页符以生成 PDF

Question

我有一个连续的 HTML 页面，可以根据用户输入进入任何高度。当用户完成插入内容后，我会生成 HTML 文档的 PDF。对于 HTML 到 PDF 的对话，我使用的是 wkhtmltopdf。

整个 html 由小部分组成。我希望当一个新部分即将开始并且控件几乎位于页面末尾时，该部分应该从下一页开始，而不是从第 1 页的一部分开始，并保留在第 2 页。

这是我的相关代码：

HML：

<div id="page-content">
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->

</div>

JavaScript：

$(window).load(function() {

var pageSize = 1300;
var currrentPageSpace = pageSize;
$(".section-item").each(function() {

    var sectionPosition = $(this).position().top;
    var sectionHeight = $(this).outerHeight(true); //Height, including the padding and margin

    var availabePageSpace = currrentPageSpace - sectionPosition;
    if (sectionHeight < availablePageSpace) {
        $(this).css("margin-top", availabePageSpace+"px"); //Give this section margin top equal to amount of remaining page space so that this section is shown on next page
        currentPageSpace += pageSize; //Now we are on new page and its available space is adjusted
    }
});
});

但此代码具有基于页面内容的随机行为。对于某些内容，它可以完美运行。有时它根本不会增加边距。有时部分项目会转到下一页并在顶部添加了很多边距。

在生成 PDF 时，是否有其他方法可以实现连续 HTML 的分页符？ 任何帮助或意见将不胜感激。

Answer 1

我计算方形“quadrado”是否具有适合高度为 100px 的 html 页面的高度，如果没有，它会在最后一个页面中添加一个分页符，并将当前高度 + 基本高度相加 100px ex。 Current_time_2000px + base_space 1000px = 300px

我的想法是在分页符中执行 google docs 或 Word 之类的操作， 但现在它甚至出现了 1.0 版本：P。

希望对我有所帮助，:)

var count_add_class = 1,
    tamanho_do_elemento = 1,
    count_soma = 0,
    i = 1;

$(".altura_bloco").each(function() {
    var a = count_add_class++;
    // pega a posição do elemento, e adcinando uma classe 1,2,3,4,5,6,7...
    $(this).addClass("element_height_" + a);

    tamanho_do_elemento = $(this).outerHeight();
    count_soma += tamanho_do_elemento;
    // console.log(tamanho_do_elemento);
    console.log(tamanho_do_elemento);

    if (count_soma > 937) {
        $(this).addClass("page-break");
        count_soma = tamanho_do_elemento;
        i++;
        // console.log(tamanho_do_elemento);
    }
});

.altura_bloco {
   width: 400px;
   height: 400px;
   background: #000;
   margin: 10px;
 }
@media print {
  .page-break {
  display: block;
  page-break-before: always;
  }
}

<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco" style="height: 500px"><br></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>