JQuery

Question

我正在使用 wkhtmltopdf 将 HTML 页面的一部分转换为可能有几页长的 PDF 文档（取决于用户输入要转换的文本）。

wkhtmltopdf 工作正常。我现在想在用户创建 PDF 文档之前向用户指示分页符将出现在何处。

我如何覆盖一个HTMLdiv标签来复制一个hr标签（< hr />）在上面要转换为 PDF 文档的 HTML 文本的 以指示在将表单内容转换为 PDF 文档之前最有可能出现分页符的位置？

我在想必须有一个JQuery/JavaScript循环条件来覆盖HTMLdiv标签（表示分页符）每5cms （出于此 post 的目的，假设分页符将在 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:

如果我在HTMLdiv标签中加上下面的no-printCSS（表示分页），div标签就不会printed/converted 通过 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;
 }

Answer 1

所以我认为，如果我理解正确的话，您需要向用户提供一个可能发生分页符的视觉指示器，即。以 CM 为单位的页面大小或此测试用例 5CM。

如果是这样，你就不能每隔 5CM 添加一个 "page-break" 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>

Answer 2

Fiddle

最简单的方法是堆叠具有所需距离高度和可见底部边框的透明 <div>。我们可以将原始 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> 来包含它。对于我们添加的每个 child <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 选择器。

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

JQuery - find height of div then create loop to overlay div

html

javascript

pdf-generation

wkhtmltopdf