网页打印A4纸-----表格在跨页时自动换页打印的实现

转自 http://www.cnblogs.com/Joans/archive/2013/02/05/2892771.html 感谢作者分享

改日把我自己的网页打印心得一起分享

 

在最近所做的一个项目中，需要通过网页来打印不少的表单，但是又不想每个打印页签各占用一个页面，这样就需要生存很多不同的冗余页面，为了减少冗余，所有的表单通过jquery的页签tab来实现的。
 
一 ：基本打印的实现：
 
　　　　　　1：tab页签在切换时的change事件中，记住每个页签的index,
 
　　　　　　2：在点击打印按钮时，根据所记住的index,由页签的id("tab名+index"组成)，获取当前tab页签下所有的html;
 
　　　　　　3： 将获取到的需要打印页签的html赋值给document.body.innerHTML，(因为网页打印，是打印当前窗口的所有的html,所以此时需要改变他的内容，为了能够回到原来的页面效果，需要记住原始页面的html,待打印完后，再把原始内容赋值回去。)
 
　　　　　　4：调用网页打印函数window.print();
 
关键代码段：
 

 
 
二：表格在跨页时自动换页的实现
 
　　在打印时，如果是一个整体的表格或文档格式的内容，就可以直接打印，不用管页面里的表格或文档是否断裂。但如果在打印的页面，有很多组的表格，而且每组表格的记录条数不是固定的，且要求每个表格在不超出A4纸大小的范围内都在一张纸上，不能出现一个小于A4纸的表格分两页打印，这时候就需要实现在表格跨页面时自动分页打印。
 
实现思路：
 
1：html结构 ：在该tab页签里面的， 表格一般有表头的描述性文字，用div表示，div的高度固定，表格体一般是table，table的每行的高度需要固定，这样一组表格的高度就固定了，注意在该html结构的css样式中不能出现padding和margin之类的样式，否则会影响哦。。。
 
2：几个固定的高度： 
 
A4纸的高度：实际为A4纸内div的高度（因为会将在一张纸内的表格包在一个div里，不然尽管设置了高度，貌似无效），经过几轮打印测试下来，高度基本定位为955px;
 
一张A4纸内内容的高度：若是将内容高度定义为A4纸的高度，貌似还是有点问题的，测试下来最后将 内容高度〈A4纸的高度，定义为：890px;
 
当累加的每组表格的高度超过所定义内容的高度时，把前面的所有组的html放在一个div内，且设置div的高度为A4纸的高度，然后将当前组的html作为第二个div的内容开始累加，最后将所有组的html累加打印即可；
 
代码：
 

网页打印与网页页面设置有关，我的都是默认设置：