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

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

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

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

我认为必须有一个JQuery / JavaScript循环条件来覆盖每个5cms的HTML div标签(表示分页符)(为了这篇文章的目的,假设每5分钟就会在PDF上发生分页) .

我曾多次尝试过这样做,但是我无法正确获取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标签(表示分页符),则如果您想知道如何处理分页标记,则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选择器.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问，不安全，部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值，array是被查找的数组。 有如下实例： &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看，他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏： 前端 文章标签： javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址：https://www.cnblogs.com/sqh17/p/7746418.html 解决：动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实
获取和渲染下拉列表选项
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
JQuery 动态添加 select option选项
网上对于select option 动态添加修改如下， $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend()
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意：$.extend是为jQuery类添加添加类方法,用$.调用（类似$.ajax），$.fn.extend则是为jQuery对象添加方法（实例方法）,用DOM元素
jQ动态回显ajax请求的值
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定，但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上，这时我们可以用字符串拼接，元素添加的方法去实现 js部分如下： 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 事件委托，
JQuery-$.when().done().fail()的使用
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1
jQuery tableExport导出 excel
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word，就试试导出excel。看见网上写的很乱，我这就把我写的整理下来，有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法（购物车数量加减）
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数（匿名函数、自执行函数）
前端——函数（匿名函数、自执行函数） FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明：function box(){} 函数表达式：var box = function(){}; 匿名函数：function(){} （属于函数表达式） 1声明了一个函数： var
js: 获取标签元素data-*属性值的方法
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签： javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制
JavaScript函数详解：匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义： 调用： 方式1：方法名(); 可以多次调用 方式2：在事件中调用，直接写函数名，不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况： 1.匿名函数自执行：声明后不需要
如何等待ajax完成再执行相应操作
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求，对于大多数业务来说，这是十分方便的，但对于一些特殊的业务，ajax的异步性会起到相反的作用。 例如在ajax请求成功后，后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin)
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间：2009年09月03日 02:10:54 作者： 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot