我正在使用wkhtmltopdf将HTML页面的一部分转换为PDF文档，该文档可能有几页长（取决于用户输入要转换的文本）。
wkhtmltopdf工作正常。我现在想要在用户创建PDF文档之前向用户指出分页符的位置。
如何覆盖 HTML div标记，以复制要转换为HTML文本的HTML文本的顶部上的hr标记（< hr />）在表单内容转换为PDF文档之前，最有可能发生分页的PDF文档？
我认为必须有一个JQuery / JavaScript循环条件来覆盖每个5cms的HTML div标签（表示分页符）（为了这篇文章的目的，假设分页将在PDF上发生每个5cms）。
我已经多次尝试过这样做了，但是我无法正确获取jq / js代码（并且它正在杀死我）。
以下是没有js / jq的代码的fiddle。
这是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标签（表示分页符），则不会通过wkhtmltopdf将div标签打印/转换为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;
}
答案 0 :(得分：3)
执行此操作的最简单方法是堆叠透明<div> s，其高度为所需距离和可见底部边框。我们可以将原始HTML中的div#page_break重新用于包含这些<div>。没有必要使用z-index，因为positioned elements are always layered on top of unpositioned elements。所以我们可以从将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>
为了将新的<div>附加到jQuery中的另一个元素，我们可以使用.appendTo：
$('<div>').appendTo('#page_break');
如有必要，我们可以插入另一个方法调用，以便调整新<div>的属性，例如.height：
$('<div>').height(400).appendTo('#page_break'); // 400 pixels
现在我们必须经常重复这一点，以便放置足够的统治者。 .height恰好是我们的朋友：
var textHeight = $('#text').height();
这是以像素为单位的高度。幸运的是，根据CSS标准there is a fixed number of pixels in a centimeter（即使是印刷版），我们可以做一些计算：
var pixelsPerInch = 96;
var cmPerInch = 2.54;
var pixelsPerCm = pixelsPerInch / cmPerInch;
pixelsPerCm约为37.8。 @ pottedmeat7的变量onePixel与此相反，即每像素厘米的数量。 5厘米恰好是大约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不是5厘米的精确倍数，你就会在文字下方得到一个悬垂的标尺。 breaks是一个优化，因此jQuery不必在循环的每次迭代中查找#page_break选择器。
答案 1 :(得分：2)
所以我想如果我理解正确，你想要一个可能发生分页的用户的视觉指示，即。页面的CM大小或此测试用例5CM。
如果是这样的话，你就不能再添加一个＆＃34;分页符＆＃34; div每隔5CM？
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>