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

Question

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

我想根据 div 部分创建分页符 - 任何给定的 div - 如果它不能完全适合页面，请在它之前插入一个分页符。

理论上，从一个 div 到最多 10 个 div 的任何地方都可以放在一个打印页面上，所以我认为我需要在页面加载后使用 jQuery 来插入。

如果这是一个桌面应用程序，我会这样处理它:

1. 测量页面宽度和高度(使用某种打印机对象)。
2. 测量每个 div 的高度 - 并从页面总剩余高度中减去该高度
3. if ( remaining_space - div_height > 0 ) {//放在页面上 } else {//先插入分页符 }

有没有什么方法可以使用 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:auto; )。

我知道这是非常 50,000 英尺的 View ，但希望它对您有所帮助。