windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了。下面是需要打印的表格:
当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出来在纸上会有空白,不太好。中间内容是不确定的可能几十条,可能上百条,这样循环在界面上展示是没有问题的,但是当使用火狐打印时会按照表格的大小成倍的缩小,最后打印到一张纸上,字体和表格都会很小,当使用其他浏览器时它会自动将内容打印到下一张纸上,因为打印到纸上不可能没有边距,所以在纸与纸衔接的时候会存在数据丢失打印不出来的情况。
经过测试,当每页17条数据的时候打印出来可以满页填充,既不会所以为了使打印出来的表格更靠谱,更为用户着想一些,在界面显示的时候显示的条目为实际的条目,打印时如果数据量少就进行自动空白填充,如果数据量大在保留标题、表格上半部分和下半部分的同时进行分页填充打印,打印完成后再恢复原来的页面。
实现思路:
1.使用打印分页css,相当于分页符,总是在此div后分页
ps:关于page-break-after的使用:http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp 需要特别注意的是它应用于:position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。
2.将界面分为两个div,一个div中用于进行界面展示,另一个div进行打印填充,两个div
一个为界面展示时的样式,另一个为打印时的样式,单击打印时页面div隐藏,对另外一个div进行填充,打印方法执行完成后,页面div显示,另一个div隐藏。
3.将页面div分为几部分:
第一部分为标题内容部分,第二部分为表格上半部分是固定的,第三部分为数据部分,每页的内容是不同的, 第四部分为表格下半部分,最后为表格下面的内容部分是固定的。
页面展示div代码展示:
********资料凭单
${currentDate}NO:
姓 名
电 话
单 位
类 别
社内 军内 地方
内 容
用 途
类 别
新闻 宣传 商业
序 号
底片号/画报号
年 代
尺 寸
价 格
${varStatus.index+1}
"/>
${item.pictureInfo.width}*${item.pictureInfo.height}
${varStatus.index+1}