我使用
wkhtmltopdf将HTML页面的一部分转换为PDF文档,该文档可能有几页长(取决于用户输入要转换的文本).
wkhtmltopdf工作正常.我现在想要在用户创建PDF文档之前向用户指示页面中断的位置.
如何覆盖HTML div标签以在要转换为PDF文档的HTML文本之上复制hr标记(< hr />),以指示在内容之前最可能发生分页的位置该表格转换为PDF文件？
我认为必须有一个JQuery / JavaScript循环条件来覆盖每个5cms的HTML div标签(表示分页符)(为了这篇文章的目的,假设每5分钟就会在PDF上发生分页) .
我曾多次尝试过这样做,但是我无法正确获取jq / js代码(而且它会让我感到害怕).
这是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;
}
解决方法
Fiddle
最简单的方法是堆叠透明的< div> s,它具有所需距离的高度和可见的底部边框.我们可以在原始HTML中重新使用div#page_break来包含这些< div> s.没有必要使用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> s来包含它.对于每个孩子< div>我们添加,我们将获得一个新的标尺,其中第一个位于#main_area顶部5cm处,每个下一个标尺位于前一个下方5cm处：
<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
现在我们必须经常重复这个,以便放置足够的统治者. .Hight恰好是我们的朋友了：
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> s添加到#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);
}
我们将这些分区放在一边,因为只要textHeight不是5cm的精确倍数,你就会在文本下方得到一个悬垂的标尺. break是一种优化,因此jQuery不必在循环的每次迭代中查找#page_break选择器.
