JQuery - 查找 div 的高度然后创建循环以覆盖 div
Posted
技术标签:
【中文标题】JQuery - 查找 div 的高度然后创建循环以覆盖 div【英文标题】：JQuery - find height of div then create loop to overlay div 【发布时间】：2017-05-11 15:20:39 【问题描述】：我正在使用wkhtmltopdf 将部分 HTML 页面转换为可能有几页长的 PDF 文档（取决于用户输入的要转换的文本）。
wkhtmltopdf 工作正常。我现在想在用户创建 PDF 文档之前向用户指示分页符的位置。
我如何覆盖 HTML div 标签以复制要转换为 PDF 文档的 HTML 文本的 hr 标签 (< hr />)在顶部在表单内容转换为 PDF 文档之前，指示最有可能出现分页符的位置？
我认为必须有一个 JQuery / javascript 循环条件来覆盖 HTML div 标签（指示分页符）每 5 厘米（为了这篇文章的目的，假设分页符将发生在 PDF 上每 5 厘米）。
我自己尝试过几次，但我无法正确获取 jq/js 代码（这让我很生气）。
这是下面代码的fiddle，没有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 标签（指示分页符），则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;
【问题讨论】：
【参考方案1】：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
现在我们只需经常重复此操作即可放置足够多的标尺。 .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 与此相反，即每像素的厘米数。 5cm正好是189px左右。
我们现在知道的足够了，可以滚动一个循环，将<div>s 添加到#page_break，直到#text 的高度被填满。最简单的情况，所有距离都固定为 5cm，只需要我们将#text 的高度除以 5cm：
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 选择器。
【讨论】：
【参考方案2】：所以我认为，如果我理解正确，您希望向用户显示可能发生分页符的视觉指示，即。页面的大小（以 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>【讨论】：
Dennis Foley，是的，HTML 中可能出现分页符的视觉指示器，但我无法让您的代码正常工作。 哎呀在两个不同的地方编辑，错过了一个变量，再试一次 pottedmeat7，谢谢，但我怎样才能让循环显示在<div id="text"></div> 标签而不是正文标签上？我自己似乎无法在 <div id="text"></div> 上进行这项工作。
它应该可以使用jQuery("#text")而不是jQuery("body")
噢！我正在使用jQuery($("#text'))。谢谢。以上是关于JQuery - 查找 div 的高度然后创建循环以覆盖 div的主要内容，如果未能解决你的问题，请参考以下文章