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

时间:2024-02-29 14:36:35

在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过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累加打印即可;

代码:

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

                              

 原文:http://www.cnblogs.com/Joans/archive/2013/02/05/2892771.html