将CSS和/或jQuery用于带有分页符的打印页面 [英] Using CSS and/or jQuery for Printed Pages with Page Breaks

问题描述

我有一个动态生成的html页面，专门用于打印.

I have a dynamically generated html page which is designed to be printed.

我想基于div部分(任何给定的div)创建分页符，如果它不能完全适合页面，请在其前插入一个分页符.

I would like to create page breaks based upon div sections - where any given div - if it DOES NOT fully fit on the page, insert a page break before it.

从理论上讲，单个打印页面上可以容纳单个div，最多可能是10个位置，因此我想在页面加载后需要使用jQuery作为插入内容.

In theory, anywhere from a single div, up to perhaps 10, may fit on a single printed page, so I am thinking I will need to use jQuery to to the insertions after the page is loaded.

如果这是桌面应用程序，我将采用以下方式:

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

是否可以使用jQuery，CSS，原始JavaScript或其他任何方式使我进入这种情况?

Is there any way using jQuery, CSS, raw JavaScript, or anything else, that would get me to this scenario?

推荐答案

好，我花了整整一天左右​​的时间解决这个问题，所以我想将解决方案发布出来，以防其他人需要答案.

Ok, I spent past day or so figuring this out, so I wanted to post my solution to this in case anyone else needed the answer.

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

1. 正常生成的输出(不是打印机专用的)
2. 创建了2个样式表(一个用于打印机，一个用于屏幕).所有要转换为打印输出的页面元素的尺寸均以英寸(而非像素)为单位.
3. 使用jQuery，我执行了以下操作:

->称为将原始页面附加到DOM的函数-类似于

-> called function that appends initial page to DOM - something like this

// 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();)

-> measure height of div that is the page (in my case, $('.page').height(); )

->运行了一个函数来插入div和新页面-像这样

-> ran a function to do the insertions of divs and new pages - something like this

$('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')都具有以下内容:

Note that each page div (in my case, class='page') in the printer stylesheet has this:

分页后:始终；

这是我在所需的打印机上创建新页面的方法.

This is how I got it to create a new page on the printer where I wanted.

运行上面的jQuery函数之后，我隐藏了包含要移入打印页面的div元素的原始部分.请注意，我无法事先隐藏此部分，因为我的jQuery测量不会产生有效的结果(在我的情况下，我将所有div放置在ID为' hide_me '的div包装器中，并设置了样式到高度:1像素；溢出:自动； ).

After running jQuery function above, I hid the original section that contained div elements I wanted to move into printed pages. Note I could not hide this section before hand because my jQuery measurements would not produce valid results (in my case, I placed all the divs inside a div wrapper with id of 'hide_me', and set the style to height:1px; overflow:auto; ).

我知道这是一个50,000英尺的视野，但希望对您有帮助.

I realize this is very 50,000 ft view, but hopefully it is helpful to you.

这篇关于将CSS和/或jQuery用于带有分页符的打印页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！