将CSS和/或jQuery用于带分页符的打印页面
我有一个动态生成的html页面，旨在打印。
我想基于div部分创建分页符 – 任何给定的div – 如果它不完全适合页面，则在它之前插入分页符。
从理论上讲，任何地方，从单个div，最多可能是10，可能适合单个打印页面，所以我认为我需要在页面加载后使用jQuery来插入。
如果这是一个桌面应用程序，我会接近这样的事情：
- 测量页面宽度和高度（使用某种打印机对象）。
- 测量每个div高度 – 并从页面总剩余高度中减去该高度
- if（remaining_space – div_height> 0）{//把它放在页面上} else {// insert page break first}
有没有办法使用jQuery，CSS，原始JavaScript或其他任何东西，这会让我到这种情况？
好吧，我花了一天左右的时间来搞清楚这一点，所以我想发布我的解决方案以防万一其他人需要答案。
一般来说，这就是我所做的。
- 正常生成输出（不是打印机预期）
- 创建了2个样式表（一个用于打印机，一个用于屏幕）。 所有页面元素的测量值都以英寸（不是像素）为单位进行打印输出。
- 使用jQuery，我做了以下事情：
– >将初始页面附加到DOM的调用函数 – 类似这样的东西
// assumes old_page_id is existing element in DOM, and var page_id = 1; $j("") .insertAfter('#' + old_page_id); – >测量作为页面的div的高度（在我的例子中，$（’。page’）。height（）;）
– >运行一个函数来插入div和新页面 – 就像这样
$('div_class').each( function() { // measure height of $(this) // add it to running total of used space on existing page // if sum total exceeds remaining space, create new page, and add to that one // if still room left, add to this one } );
请注意，打印机样式表中的每个页面div（在我的例子中，class =’page’）都有：
page-break-after：always;
这就是我在打印机上创建我想要的新页面的方法。
运行上面的jQuery函数后，我隐藏了包含我想要移动到打印页面的div元素的原始部分。 注意我之前无法隐藏此部分，因为我的jQuery测量结果不会产生有效结果（在我的情况下，我将所有div放在id为’ hide_me ‘的div包装器中，并将样式设置为height：1px; overflow：汽车; ）。
我意识到这是非常50,000英尺的视图，但希望它对你有所帮助。
您总是可以在HTML中的点处插入一个空DIV标记，其中包含CSS属性{pageBreakBefore：’always’}或{pageBreakAfter：’always’}，您可以通过检查jQuery中的页面边界来计算页面边界。 DIV或其他什么。 但是您需要对页面内容有相当深入的了解，并且可能将字体大小等指定为“pt”而不是“px”。
虽然在这里看到类似的查询：
使用CSS强制打印分页符
不完全是你想要的，但看看这个http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
使用额外的JS，可能是您想要尝试实现的。
您可以尝试使用此插件来打印页面的元素。 http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm
如果您遵循为桌面应用程序建议的相同逻辑，这可能会有所帮助。 你可以将你的“页面”包装在div中，这就是你要告诉jqPrint打印的内容。 分页符可以是另一个元素，也可以是div，但有一个类让你知道它的分页符。 例如：
...
等等..
然后
$('#page1').jqprint();
我不知道你是否熟悉jQuery。 如果你不告诉我们。
在我看来，印刷分页的重点是不要把事情分开。 通常，你最不希望分裂的是表格数据。 因此，这是一种假设您已将
更改为表格式并将不应拆分为
分组的行集合分组的方法。
我们希望标记要查找的代码的页眉和页脚，我们不一定希望它们出现在它们描述的位置
这会在页面加载时调用，但可以在打印前调用。
我们将表格布置成这样的分页。
PAGE ONE HEADER LATER PAGE HEADER (IF RELEVANT) ROW GROUP 1 ROW GROUP N FOOTER
我们扫描
并在任何注定要突破页面末尾的元素之前填充页脚和标题。
我们使用css类标记页眉和页脚，并通过将它们放在需要更改的行流中的位置来跟踪更改页眉和页脚的可能性，但是使用另一个css类使它们不可见。
令人讨厌的是，一些页面破坏的实现仅适用于严格的“块”元素，因此它没有在tbody上定义。 因此，我已将其应用于附加到每个页表的
标记类。