找到div的高度，然后创建循环覆盖div
我正在使用wkhtmltopdf将HTML页面的一部分转换为可能长达几页的PDF文档（取决于用户输入的要转换的文本）。
wkhtmltopdf工作正常。 我现在想要在用户创建PDF文档之前向用户指出分页符将出现在哪里。
如何覆盖HTML div标记以在要转换为PDF文档的HTML文本之上复制hr标记（ < hr /> ），以指示分页最有可能发生的位置表单被转换为PDF文档？
我在想，必须有一个JQuery / JavaScript循环条件来覆盖每个5cms的HTML div标签（表示分页符）（为了本文的目的，假设分页符将在每个5cms的PDF上发生） 。
我已经尝试了几次来自己做这件事，但我无法得到jq / js代码（它正在杀死我）。
没有js / jq的代码如下。
这是HTML：
<body>
<div id="main_area">
<div id="text">
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
</div>
<div id='page_break'></div>
</div>
</body>
这里是CSS：
如果我将下面的非打印CSS添加到HTML div标记（指示分页符），那么div标记将不会被wkhtmltopdf打印/转换为PDF文档，以防您想知道如何处理分页符标记在PDF文档中。
@media print {
/* prevents the element from being printed in the pdf */
.no_print, .no_print * {
display: none !important
}
}
#main_area {
padding: 2px;
width:100%;
background:#fff;
color:#333;
}
#text {
z-index:1;
}
#page_break {
position: absolute;
width: 100%;
height: 5px;
background: red;
top: 5cm;
z-index:0;
opacity: 0.2;
}
小提琴
最简单的方法是通过堆叠具有所需距离高度和可见下边框的透明<div> s。 我们可以在原始HTML中重新调整div#page_break来包含这些<div> 。 没有必要使用z-index ，因为定位元素总是位于未定位元素的顶部。 所以我们可以通过将CSS更改为：
#main_area {
padding: 2px;
width: 100%;
background: #fff;
color: #333;
}
#page_break {
position: absolute;
top: 0;
width: 100%;
opacity: 0.2;
}
#page_break > div {
width: 100%;
height: 5cm;
border-bottom: 5px solid red;
margin-bottom: -5px;
/* negative margin above ensures that the distance
between two rulers is exactly the height of the div
*/
}
如果我们现在考虑原始HTML的相关位，
<div id="main_area">
<div id="text">
...
</div>
<div id='page_break'></div>
</div>
我们不会看到任何统治者，因为我们添加了统治者容器，但是我们没有给它任何<div>来包含。 对于我们添加的每个孩子<div> ，我们将获得一个新的标尺，第一个标尺位于#main_area顶部5厘米处，每个下一个标尺位于之前5厘米处：
<div id="main_area">
<div id="text">
...
</div>
<div id='page_break'>
<div></div> <!-- first ruler, 5cm from top -->
<div></div> <!-- second ruler, 10cm from top -->
<div></div> <!-- third ruler, 15cm from top -->
</div>
</div>
为了在jQuery中为另一个元素附加一个新的<div> ，我们可以使用.appendTo ：
$('<div>').appendTo('#page_break');
如有必要，我们可以插入另一个方法调用，以调整新的<div>属性，例如.height ：
$('<div>').height(400).appendTo('#page_break'); // 400 pixels
现在我们不得不经常重复这个，足以放置足够的统治者。 .height恰好是我们的朋友：
var textHeight = $('#text').height();
这是以像素为单位的高度。 幸运的是，根据CSS标准，厘米上的像素数量是固定的（即使在印刷中），所以我们只需要做一些计算：
var pixelsPerInch = 96;
var cmPerInch = 2.54;
var pixelsPerCm = pixelsPerInch / cmPerInch;
pixelsPerCm约为37.8。 @ pottedmeat7的变量onePixel与此相反，即每像素的厘米数。 5cm恰好是大约189px。
我们现在知道足够多的滚动循环，将<div>添加到#page_break直到#text的高度被填充。 最简单的情况是，所有距离固定为5厘米，只需要我们将#text的高度除以5厘米即可：
var divisions = Math.floor((textHeight / pixelsPerCm) / 5);
var breaks = $('#page_break');
for (var i = 0; i < divisions; ++i) {
$('<div>').appendTo(breaks);
}
我们在地板上divisions ，因为否则，只要textHeight不是5cm的整数倍，就会在文本下面出现一个悬挂的标尺。 breaks是一种优化，所以jQuery不必在循环的每次迭代中查找#page_break选择器。
所以我认为如果我理解正确，你需要一个视觉指标给用户页面中断可能发生，即。 一个页面的CM大小或5CM的测试案例。
如果是这种情况，你不能每隔5CM添加一个“分页”div吗？
var onePixel = 0.02645833;
var onePage = 5;//in CM
var height = Math.floor(jQuery(document).height() * onePixel);
var mainBody = jQuery("body");
for(var i=onePage; i<height; i+=onePage) {
mainBody.append("<div id='page_break' style='top:"+i+"cm;'></div>");
}@media print {
/* prevents the element from being printed in the pdf */
.no_print, .no_print * {
display: none !important
}
}
#main_area {
padding: 2px;
width:100%;
background:#fff;
color:#333;
}
#text {
z-index:1;
}
#page_break {
position: absolute;
width: 100%;
height: 5px;
background: red;
top: 5cm;
z-index:0;
opacity: 0.2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="main_area">
<div id="text">
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
<p>
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet.
</p>
</div>
</div>
</body>上一篇: find height of div then create loop to overlay div
下一篇: Protecting .NET framework 4.x web API with Identity server 4 in