网页中JS实现（调用）打印预览功能

网页中JS实现（调用）打印预览功能

近期的项目中需要在页面中实现打印预览功能——点击网页中的“打印”(Print)，弹出打印预览窗口，点击窗口页面中的“开始打印”(Print)，则出现浏览器的打印界面。

看到这样的需求首先想到的是JavaScript，似乎也只有JavaScript。如果说用.Net去做的话那简直是为了杀一只鸡而动用一辆坦克——后果可想而知。

实现打印网页非常简单，一个window.print();就完成了。

至于打印预览，经过翻山越岭的翻阅资料——这是一项不可能轻易完成的任务——JavaScript根本就不支持打印预览，Firefox等浏览器也没有提供相应的调用接口或方法。

至于网上说的 WebBrowser——IE内置的浏览器控件，虽然可以实现打印、打印预览、打印设置等功能，但仅仅是在IE下可行，鉴于这点足以将该方案拒之门外了。

那么怎么才能满足需求呢——打印预览：即希望在打印前，看看打印出来是个什么样子的。稍微变通一下这个问题就很简单了，只要你知道CSS有针对打印机的样式！接下来该怎么做就不用多说了吧？

回到最开始的需求描述：

1. 点击网页中的“打印”(Print)，弹出打印预览窗口：
一个window.open打开打印预览页面，该页面内容与被打印页面内容完全一样，不同的只有一点，增加了用于打印机的样式：
<link href="/print.css" rel="stylesheet" />
<link href="/print.css" rel="stylesheet" media="print" />
需要使用两次，第一次是给浏览器用的，第二次是给打印机用的。

至于这个打印页面如何获得被打印页面的代码，并加入上述css就是不在本文讨论的技术问题了，用asp、php、.net、js都可以实现。

2. 点击窗口页面中的“开始打印”(Print)，则出现浏览器的打印界面
预览页面出来了，那就是打印，在打印预览页面中加入 "开始打印"按钮，给它一个window.print();就解决了。

JS实现网页打印预览的功能解决了——上面的方案是通用的，但打印效果会打折扣——虽然样式可以隐藏部分不需要打印的内容，但始终改变不了结构。所以要有更好的打印效果还得有点针对性的去做，那就是为每个模块建立相应的打印预览页面，将其按照标准文档的格式排版，这样打印效果才更适合阅读——当用户拿着一张A4纸的时候他看到的应该是清晰明了的文档，而不是残缺不全的网页。

当做到这里时，偶然发现微软Live Mail（原Hotmail）的邮件打印预览也是这样干的——

 
图1.邮件右键菜单中的打印预览按钮

 
图2.针对邮件的打印预览页面

虽然微软也这样干，不过看看这个打印预览，连最基本的需要几张纸都看不到，是不是太不体贴了？而浏览器中的打印预览——纸张数量，页面边距、页面大小、横向竖向、打印背景、文档标题等等，两者相比较，选择在页面中加入打印预览功能的理由是什么？

我是绝对不会用的，但是有人要用，那就是有需求！