JQuery - 找到div的高度然后创建循环以覆盖div

Question

JQuery - 找到div的高度然后创建循环以覆盖div

use*_*774 8 html javascript jquery pdf-generation wkhtmltopdf

我使用wkhtmltopdf将HTML页面的一部分转换为PDF文档,该文档可能有几页长(取决于用户输入要转换的文本).

该wkhtmltopdf工作正常.我现在想要在用户创建PDF文档之前向用户指示页面中断的位置.

如何覆盖 HTML div标签以在要转换为PDF文档的HTML文本之上复制hr标记(< hr />),以指示在将表单内容转换为页面之前最有可能发生分页的位置PDF文件？

我认为必须有一个JQuery/JavaScript循环条件来覆盖每个5cms的HTML div标签(表示分页符)(为了这篇文章的目的,假设每5分钟就会在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>

Run Code Online (Sandbox Code Playgroud)

这是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;
 }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jul*_*ian 3

小提琴

最简单的方法是堆叠<div>具有所需距离高度和可见底部边框的透明物体。我们可以重新调整div#page_break原始 HTML 中的来包含这些<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
     */
}

Run Code Online (Sandbox Code Playgroud)

如果我们现在考虑原始 HTML 的相关部分，

<div id="main_area">
    <div id="text">
        ...
    </div>
    <div id='page_break'></div>
</div>

Run Code Online (Sandbox Code Playgroud)

我们还看不到任何标尺，因为我们添加了标尺容器，但还没有给它任何<div>要包含的内容。对于我们添加的每个子项<div>，我们将获得一个新的标尺，其中第一个标尺位于距顶部 5 厘米处#main_area，下一个标尺位于前一个标尺下方 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>

Run Code Online (Sandbox Code Playgroud)

为了将新元素附加<div>到 jQuery 中的另一个元素，我们可以使用.appendTo：

$('<div>').appendTo('#page_break');

Run Code Online (Sandbox Code Playgroud)

如果有必要，我们可以插入另一个方法调用来调整 new 的属性<div>，例如.height：

$('<div>').height(400).appendTo('#page_break');  // 400 pixels

Run Code Online (Sandbox Code Playgroud)

现在我们只需要经常重复此操作即可放置足够的标尺。.height碰巧又成为我们的朋友：

var textHeight = $('#text').height();

Run Code Online (Sandbox Code Playgroud)

这是以像素为单位的高度。幸运的是，根据 CSS 标准，每厘米的像素数是固定的（即使在打印中也是如此），所以我们可以做一些计算：

var pixelsPerInch = 96;
var cmPerInch = 2.54;
var pixelsPerCm = pixelsPerInch / cmPerInch;

Run Code Online (Sandbox Code Playgroud)

pixelsPerCm约为37.8。@pottedmeat7 的变量onePixel是这个的倒数，即每个像素的厘米数。5cm恰好是189px左右。

我们现在已经知道足够多的知识来滚动一个循环，将<div>s 添加到，直到填满#page_break的高度。#text最简单的情况，所有距离都固定为 5cm，只需要我们将高度除以#text5cm：

var divisions = Math.floor((textHeight / pixelsPerCm) / 5);

var breaks = $('#page_break');
for (var i = 0; i < divisions; ++i) {
    $('<div>').appendTo(breaks);
}

Run Code Online (Sandbox Code Playgroud)

我们将放在地板上divisions，否则只要textHeight不是 5cm 的精确倍数，您就会在文本下方看到一个悬空的尺子。breaks是一种优化，因此 jQuery 不必#page_break在循环的每次迭代中查找选择器。

归档时间：	8 年，11 月前
查看次数：	319 次
最近记录：	8 年，10 月前