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

JQuery add pagebreak (like Google Docs or MS Word) and go to next page

本文关键字：Word 一页 MS 分页 添加 Docs Google JQuery      更新时间：2023-09-26

嗨，我需要创建一个函数来添加分页符，比如带有页眉和页脚的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中使用这个。

检查类为"高度块"的元素是否适合某个高度1000px，如果不合适，则在最后一行插入分页符，意味着每次验证时，所有页面的高度都为100px如果内容适合100px高的页面

我的想法是在分页符中做一些类似谷歌文档或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>

相关文章：