找回密码
 注册

QQ登录

只需一步,快速开始

查看: 14292|回复: 11

[教程] 打印预览&打印 样式

[复制链接]
发表于 2010-1-12 10:20:12 | 显示全部楼层 |阅读模式
这是一个可以帮助你实现 打印预览&打印 的样式. 几个月前的项目中遇到这样的需求时开发的, 这几天又遇到同样的需求. 就将这个整理了一下发到这里来.

别光看运行代码的效果页, 试试这个页面的打印或打印预览. 如果你只觉得这是个简单的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

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 wiseinfo 于 2010-1-21 08:10 编辑 ]
grid.png

评分

参与人数 1威望 +2 收起 理由
yoom + 2 谢谢分享

查看全部评分

 楼主| 发表于 2010-1-12 10:29:04 | 显示全部楼层
之前研究时的一些数据, 关于不同浏览器打印区域尺寸. 浏览器打印区域尺寸 是指 不同浏览器 在打印页面时 不通过缩小设置 可以在 单页纸张内 打印的最大像素 .

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

[[i] 本帖最后由 wiseinfo 于 2010-1-12 10:32 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-1-20 09:56:44 | 显示全部楼层
很受用,谢谢楼主分享宝贵经验!
回复 支持 反对

使用道具 举报

发表于 2010-1-20 16:56:06 | 显示全部楼层
貌似图片无法显示,先收藏,再慢慢试。
或许接触的工作比较类似,wiseinfo前辈总带来大大的惊喜```

我在制作打印模板的时候经常遇到莫名其妙的问题,最后不断地套打才实现想要的效果。
有个问题实在想了解一下...无法打印背景图片有什么好办法不?
回复 支持 反对

使用道具 举报

发表于 2010-1-20 16:58:49 | 显示全部楼层
记得字体用 PT MEIDIA 声明为 PRINT
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-1-21 09:27:01 | 显示全部楼层
原帖由 [i]14px 于 2010-1-20 16:56 发表
貌似图片无法显示,先收藏,再慢慢试。
或许接触的工作比较类似,wiseinfo前辈总带来大大的惊喜```
我在制作打印模板的时候经常遇到莫名其妙的问题,最后不断地套打才实现想要的效果。
有个问题实在想了解一下 ...



图片地址已经修改了.

发了这篇之后, 一直无人. 联想再之前号召几人做WUI Framework亦无人问津. 遂觉无趣....

也许我脱离现世太远了, 我所觉得有用的在这里太不直接了....

但我还是希望可以把我所了解的写在这里为需要的人已尽绵薄之力....

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

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

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

1. 直接打印网页. 设计网页时应事先就考虑好避免在打印时会遇到的问题. 同时使用CSS媒体选择功能. 这是较为方便的但问题较多的方案.
如: 在何处使用图片何处使用背景. 这也是 http://bbs.blueidea.com/viewthre ... p;page=3#pid4541660 在该篇回复中关于 LOGO 是用 图片 还是 背景图片 的原因之一. 无背景时的文字可读性. 如果你在网页中使用黑色背景白色文字, 那么在不打印背景时你的文字也将无影踪. 控制网页的宽度. 虽然较新的浏览器大部分可以做缩放打印, 但过宽的网页打印时还是会面临种种问题.

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

3. 生成打印PDF. 利用与浏览网页相同的数据生成打印PDF. 这需要服务器端做响应的PDF生成工具的开发. 这是最为复杂的但效果最好的方案.
PDF可以避免页边距问题, 分辨率问题, 文字符号编码问题等等等等.
回复 支持 反对

使用道具 举报

发表于 2010-1-21 16:34:29 | 显示全部楼层
谢谢指导!

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

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

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

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

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

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

使用道具 举报

发表于 2010-5-3 15:33:23 | 显示全部楼层
最近也在做国外的项目,打印,导出PDF,搞的人很烦,感谢楼主分享,先研究一下
回复 支持 反对

使用道具 举报

发表于 2010-5-4 13:34:22 | 显示全部楼层
牛人,收藏慢慢学习
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-5-4 23:01:55 | 显示全部楼层
原帖由 [i]zhutianyi 于 2010-5-3 18:06 发表
不同的dpi所需要的px是不一样的,所以以此为据设计网页没太大意义,由其是做产品的时候。 打印想复杂了是没有止境的。比如一本书的封皮、目录、页眉页脚、页号、跨页的内容,要完美的把这一整套东西打印出来,已经完 ...


您好像很懂呀! 您看明白我说的是什么了吗? 我不是在和Adobe抢生意!

DPI呵呵! 您在打印网页时在哪儿个浏览器的哪儿个地方设置DPI来着?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-5-4 23:17:46 | 显示全部楼层
原帖由 [i]14px 于 2010-1-21 16:34 发表
看样子目前还是没有什么很好的解决背景打印的方案,大面积背景浪费纸墨是自然的,但是我的用户貌似不在乎纸墨。(当然他们也有他们的解决办法,他们直接把整页截了下来打印的,那样网页文字就不是矢量 ...


我也遇到过需要打印背景的情况! 我是用图片加z-index来实现的!

比如在一个项目中遇到要配合Google Chart Tools来完成效果. 因为早期的Google Chart Tools功能还不是很强大, 在显示上不能完全满足我的要求, 我就想到了叠层的做法. 最初我将Google Chart Tools图表图片做为一个背景叠在我需要的透明图片背后, 在打印时遇到了致命问题 , 只能乖乖的改为z-index来做了.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-5-6 00:19:01 | 显示全部楼层
原帖由 [i]zhutianyi 于 2010-5-5 12:52 发表

你不是说最完美的方案是转PDF吗…… DPI是系统的显示设置,比如客户端的DPI是96,服务器端设的是120,转换后就会出问题。而且转PDF的时候会有损耗的,这比DPI还难搞。


转PDF可不是用网页转! 设计PDF模版, 将数据库中的数据用程序填入模版中! 这个过程完全不涉及到WebPage什么事! 最简单的实例是被应用在国外的工程采购网站上, 货品技术参数清单多以这种方式提供.

再说即便真是将WebPage转成PDF也不该DPI什么事! 因为PDF是用来打印的! 用 CM 或 IN 来做单位! 无论服务器还是客户端 CM 或 IN 的长度是一定的! DPI的不同在屏幕上看起来也许不同但对于打印, 只是清晰度的问题!

转PDF的损耗? 为什么转PDF时会有什么损耗? 文字 or 图片? 文字PDF中会储存文字编码并不会有何损耗, 如果担心字体问题可以要求PDF携带字体或转为矢量! 图片PDF中可以设置保存图片的格式及质量, 网页中的72点图可能在打印质量上确实有些低, 但对于Web打印应该足够了.
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-9-26 04:50 , Processed in 0.067590 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表