将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("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.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英尺的视图,但希望它对你有所帮助.

原文地址：https://www.jb51.cc/css/217939.html