将CSS和/或jQuery用于带分页符的打印页面

Question

我有一个动态生成的html页面,旨在打印.

我想基于div部分创建分页符 - 其中任何给定的div - 如果它不完全适合页面,则在它之前插入分页符.

从理论上讲,任何地方,从单个div,最多可能是10,可能适合单个打印页面,所以我想我需要在页面加载后使用jQuery来插入.

如果这是一个桌面应用程序,我会接近这样的事情:

1. 测量页面宽度和高度(使用某种打印机对象).
2. 测量每个div高度 - 并从页面总剩余高度中减去该高度
3. if(remaining_space - div_height> 0){//把它放在页面上} else {// insert page break first}

有没有办法使用jQuery,CSS,原始JavaScript或其他任何东西,这会让我到这种情况？

Answer 1

好吧，我花了大约一天的时间来解决这个问题，所以我想发布我的解决方案，以防其他人需要答案。

一般来说，这就是我所做的。

1. 正常生成输出（不是打印机预期的）
2. 创建了 2 个样式表（一张用于打印机，一张用于屏幕）。所有要转换为打印输出的页面元素的测量单位都是英寸（不是像素）。
3. 使用 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'）都有：

分页后：总是；

这就是我如何在打印机上我想要的位置创建新页面的方法。

运行上面的 jQuery 函数后，我隐藏了包含我想要移动到打印页面中的 div 元素的原始部分。请注意，我无法事先隐藏此部分，因为我的 jQuery 测量不会产生有效的结果（在我的例子中，我将所有 div 放置在 id 为“ hide_me ”的 div 包装器内，并将样式设置为height:1px；overflow:汽车;）。

我意识到这是 50,000 英尺的视图，但希望它对您有帮助。