我有一个动态生成的html页面,旨在打印.
我想基于div部分创建分页符 – 任何给定的div – 如果它不完全适合页面,则在它之前插入分页符.
从理论上讲,任何地方,从单个div,最多可能是10,可能适合单个打印页面,所以我认为我需要在页面加载后使用jQuery来插入.
如果这是一个桌面应用程序,我会接近这样的事情：
>测量页面宽度和高度(使用某种打印机对象).
>测量每个div高度 – 并从页面总剩余高度中减去该高度
> if(remaining_space – div_height> 0){//将它放在页面上} else {// insert page break first}
有没有办法使用jQuery,CSS,原始JavaScript或其他任何东西,这会让我到这种情况？
解决方法
好吧,我花了一天左右的时间来搞清楚这一点,所以我想发布我的解决方案以防万一其他人需要答案.
一般来说,这就是我所做的.
>正常生成输出(非打印机预期)
>创建了2个样式表(一个用于打印机,一个用于屏幕).所有页面元素的测量值都以英寸(不是像素)为单位进行打印输出.
>使用jQuery,我做了以下事情：
// 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_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英尺的视图,但希望它对你有所帮助.
