如何实现页面的打印版本

尽管我们早就进入E时代，但是纸质阅读仍然是很多人所习惯的。比如我发现了一个很好的博文，常常会把它打印出来放在案边以便以后查阅和阅读。众所周知，现在的很多网站页面的排版并不适合打印,比如页面有很多插入广告等等。所以提供一个专门用于打印的页面在很多时候是必须的。所幸的是CSS已经提供了很好的打印支持，让我们可以很容易实现一个打印友好的页面。这篇博文就来介绍一下该主题。

 

添加打印链接

 

现在的浏览器基本都有打印功能，一般会放到“文件”菜单下面。但是这个很多时候使用起来还是不太方便，很多页面都在页面中添加了打印链接。如新浪新闻页面中一般都在正文最后有打印链接。要实现一个打印链接很容易，你只需要添加一个普通的HTML链接，然后定义如下的onClick事件即可：

 

<a οnclick="window.print();">打印</a> 

 

添加打印样式

 

如文章开头所说，CSS 2.x中已经提供了打印样式的支持。如下：

 

<style meta=”print” type=”text/css”>….</style>

 

通过定义Style对象的"meta”属性为"print"来给页面定义一套打印专用的样式。类似，你可以定义用于传统屏幕显示的页面样式：

 

<style meta=”screen” type=”text/css”>….</style>

 

在定义CSS打印样式的时候，会用到一些打印专用的CSS属性，如下：

Property	Description	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
page-break-after	Sets the page-breaking behavior after an element	2
page-break-before	Sets the page-breaking behavior before an element	2
page-break-inside	Sets the page-breaking behavior inside an element	2
widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

 

在设置打印页面的格式的时候，我们最好遵循下面的一些原则：

• 把页面颜色转换层黑白颜色：现在的页面颜色都很丰富。但是如果客户的打印机器只支持黑白两色，丰富颜色的页面打印出来非常不方便阅读。
• 对所有的链接添加下划线：在屏幕上面，我们可以通过鼠标形状或者字体颜色区别链接和普通文本。但是这些在打印出来的纸张上都没有了。所以添加下划线可以帮助用户知道打印出来的文本中那些是链接。
• 注意文本的字体和字体大小：一般来说，打印机上的字体库和我们电脑上的字体库并不完全相同。另外，打印页面中要适当增加字体大小以方便阅读打印出来的内容

 

选择打印内容

 

在介绍完添加打印链接和设置打印内容后，我们来讨论一下应该怎样选择页面中的内容来构建打印页面。现在的网络页面内容非常丰富，有导航，图片，广告等等。但是我们并不能把所有的内容都添加到打印页面中。比如用户当然不希望打印出来的页面还有很多广告内容，这样既影响以后阅读，又浪费纸张和油墨（我们现在可都人人讲环保了--)。一般来说，选择打印内容可以遵循下面的原则：

• 删除所有无关紧要的图片：一般来说，仅仅保留和文章正文相关的图片和如网站Logo图片。
• 删除所有或者绝大部分广告：在打印出来的纸张上看到广告总是让客户不太舒服的事情。当然具体保留不保留广告，或者保留什么广告，你需要和市场部门讨论。
• 删除导航内容：大多时候打印出来的导航没有什么用处，只会占用太多的打印空间。
• 移出所有的JS代码、Flash或者动画：在打印出来的纸张上，任何动画都没有意义了。另外，打印页面包含的一般都是静态内容，我们就没有必要包含JS代码了。如果需要动态生成内容，如查询数据库。我们可以在构建打印页面把所有需要动态生成的内容都生成好直接放到打印页面中。
• 包含用户署名行和文章的来源：这样用户通过打印版本就能知道是从那里打印出这篇文章和谁写这篇文章。
• 包含文章的原始URL：用户可以通过这个URL在互联网上找到这篇文章。
• 包含版权信息：这个可以保证你的版权信息永远包含在的打印版本中。

选择打印内容是一个涉及很多方面的工作，需要设计、市场等多方面的协调。总之，在选择打印内容的时候需要时刻考虑你的打印内容是不是打印友好的（print-friendly），这个内容打印出来对用户以后使用是不是又帮助的。

 

写在最后

 

实现打印页面是构建一个专业网站中经常碰到的问题，它和我们平时构建浏览器中的页面有很多不同的地方，比如不同的样式设置方式，不同的内容选择标准。最后，这里给一个CSS打印页面的W3C标准链接，如果你想了解CSS打印样式的细节，请访问这个的网页：http://www.w3.org/TR/css-print/