打印预览&打印 样式

这是一个可以帮助你实现 打印预览&打印 的样式. 几个月前的项目中遇到这样的需求时开发的, 这几天又遇到同样的需求. 就将这个整理了一下发到这里来.

别光看运行代码的效果页, 试试这个页面的打印或打印预览.  如果你只觉得这是个简单的Div加上个阴影来单纯模拟一个纸张效果你就错了, 其中的打印区域大小设置我化了很久的时间.

代码中用了一张标尺网格图来帮助大家了解打印区域. 凡有网格部分的内容便为将来打印出的区域. 

不同浏览器的默认打印设置有所不同, 不同打印机所能打印的最小打印边距也不同, 这里我将打印边距设置为0.5英寸. 这也是 Windows 版  Firefox 3.5  &  IE 7  &  IE 8  的默认设置.  IE 6  虽然不是这个默认设置但我所做的其也能兼容, 唯独就是在打印时内容相对偏上. 

这是在多个浏览器的默认打印区域尺寸测试出的我个人认为最合适的尺寸.

Letter_Vertical  660 x 900
Letter_Horizontal  900 x 660

因为我所在的地区一般只使用 Letter 纸. 又因为我的项目中没有A4纸张的需求, 所以没有对A4纸张做打印区域大小的校正, 期待有朋友可以做类似的研究来得出A4的打印区域准确大小.  测试时请将纸张大小设置为 Letter . 8.5 x 11 英寸.

第一段代码利用4个页面来测试4种纸张方向和纸张尺寸的效果. 但在Web打印中通常不能在一次中打印多种纸张方向和纸张尺寸, 所以在使用时只能打印 多页一种纸张方向和纸张尺寸 . 请看实际使用代码.

兼容:
Mac OS X :    Safari    Firefox
Windows:    IE6    IE7    IE8    Firefox

问题:
IE 6 & IE 7 需要到 浏览器设置中才能打开打印背景选项.
在使用竖向纸张时 IE 7 会自动缩小打印内容, 请在打印预览中将 "缩小字体填充" 改为 "100%" .

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

.
.
.
.
.
.
实际使用时:  请在 页面设置 中 设置 纸张尺寸 Letter ; 纸张方向 Horizontal

运行代码  复制代码  另存代码   提示：您可以先修改部分代码再运行

之前研究时的一些数据, 关于不同浏览器打印区域尺寸. 浏览器打印区域尺寸 是指 不同浏览器 在打印页面时 不通过缩小设置 可以在 单页纸张内 打印的最大像素 .

Mac OS X

        Firefox 3.5.7
                Letter
                        Vertical        670 x 920
                        Horizontal        910 x 680
                A4
                        640 x 990
                        970 x 660
        
        Safari 4.04
                Letter
                        710 x 900
                        940 x 690
                A4
                        690 x 970
                        1000 x 650
        
Windwos        
        
        IE 6.0
                Letter
                        960 x 1020
                        1020 x 960
                A4
                        740 x 1090
                        1090 x 740
        IE 7.0
                Letter
                        720 x 960
                        970 x 730
                A4
                        710 x 1040
                        1040 x 710

        IE 8.0
                Letter
                        720 x 960
                        960 x 720
                A4
                        690 x 1020
                        1020 x 690
                        
        Firefox 2.0.0.20
                Letter
                        690 x 940
                        940 x 690

        Firefox 3.0.0.14
                Letter
                        680 x 940
                        940 x 680

        Firefox 3.6B5
                Letter
                        680 x 940
                        940 x 680

背景颜色&图片是个难题, IE可以用控件来实现, 但其他浏览器非用户手动而不能. 个人觉得也无需非要在背景颜色&图片上较真. 不打印背景颜色&图片是浏览器开发者对用户环境的判断而来的结果. 现有通用打印机按原理来分类可分为: 针式打印机 喷墨打印机 激光打印机. 按色彩来分类可分为: 黑白打印机 彩色打印机. 这其中 针式 & 激光 较少有 彩色打印能力. 而 彩色打印能力 较好的 喷墨打印机 耗材 又相对昂贵. 打印设备兼容 和 打印耗材节约 促成了这一点. 背景颜色&图片在很多时候也会带来打印机性能问题(大面积颜色会使打印速度降低), 以及灰度背景与文字的可读性问题(在黑白打印机中一些颜色被转化为深灰色导致本来在网页中对比度很强的背景与文字打印出来确看不是很清楚).

我在美国的几个月发现, 打印机在这里几乎是家家必备的. 因为将文件或网页打印出来以完成某项任务是常常发生的. 打印: 账单, 回执, 公函, 购物清单.... 很多政府部门网站提供网上填写申请, 打印签字后, 邮寄或送交的工作方式. 所以打印网页是很多网站的必备功能.

一般在打印网页时通常会有3种解决方案:

1. 直接打印网页. 设计网页时应事先就考虑好避免在打印时会遇到的问题. 同时使用CSS媒体选择功能. 这是较为方便的但问题较多的方案.

如:  在何处使用图片何处使用背景. 这也是  http://bbs.blueidea.com/viewthre ... p;page=3#pid4541660 在该篇回复中关于 LOGO 是用 图片 还是 背景图片 的原因之一.  无背景时的文字可读性. 如果你在网页中使用黑色背景白色文字, 那么在不打印背景时你的文字也将无影踪.  控制网页的宽度. 虽然较新的浏览器大部分可以做缩放打印, 但过宽的网页打印时还是会面临种种问题.

2. 生成打印网页. 利用与浏览网页相同的数据生成打印网页. 为打印网页单独设计布局和样式. 这是较为复杂的但效果较好的方案.

3. 生成打印PDF. 利用与浏览网页相同的数据生成打印PDF. 这需要服务器端做响应的PDF生成工具的开发. 这是最为复杂的但效果最好的方案.

PDF可以避免页边距问题, 分辨率问题, 文字符号编码问题等等等等.

看样子目前还是没有什么很好的解决背景打印的方案，大面积背景浪费纸墨是自然的，但是我的用户貌似不在乎纸墨。（当然他们也有他们的解决办法，他们直接把整页截了下来打印的，那样网页文字就不是矢量的了，只是他们自己看不出来或者不在乎。）

我们一般采取直接打印当前页的方式。

logo的问题我分media来解决的，对于不需要打印的对象在class中做上noPrint的标记，logo也在标记之列，对于screen采用background，对于print用img插入。

打印设置里可以设置边距，我们对用户进行要求就可以解决这一问题。

----------------------------------

题外话，毕竟现在国内做B/S结构软件的公司都不太重视这方面的活儿，大家大多是在从事网站开发的工作，响应的人所以不多，不要灰心噻，你的思路肯定让很多受到了启发。