javascript - JQuery 添加分页符（如 Google Docs 或 MS Word）并转到下一页

Question

嗨，我需要创建函数来添加分页符，例如带有页眉和页脚的 Ms Word：

这是我的代码：

<script>
$(document).ready(function(){
    var page = function({
        $("*").before(<div id="header" style="border-bottom:2px solid;position:absolute; top:10px"></div>)
        $("*").after(<div id="footer" style="border-top:2px solid;position:absolute; bottom:10px"></div>);
        if ($(body).outerheight()) > 
        {
            $("#footer").after<div style="page-break-after:always, margin:9px solid;"></DIV>
        }   
    });
});
</script>

我的问题是：我怎样才能像谷歌文档一样转到下一页（并创建这个）（空间进入第 1 页第 2 页）

我想在 tinymce 4.0 中使用它。

Answer 1

检查具有“高度块”类的元素是否适合 1000px 的高度，如果不适合则在最后一行插入分页符，表示所有页面的高度均为 100px，每次验证内容是否适合100px 高的页面

我的想法是在分页符中执行 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>