Question

您好我需要创建一个函数来添加像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>

我的问题是：如何进入下一页（并创建此内容），例如google docs（space into page1 page 2）

我想在tinymce 4.0中使用它。

Answer 1

检查具有“高度块”类的元素是否适合高度 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>

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

1 个答案: