首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

网页中JS兑现(调用)打印预览功能

2012-09-22 
网页中JS实现(调用)打印预览功能网页中JS实现(调用)打印预览功能link href/print.css relstylesheet

网页中JS实现(调用)打印预览功能

网页中JS实现(调用)打印预览功能<link href="/print.css" rel="stylesheet" media="print" />
需要使用两次,第一次是给浏览器用的,第二次是给打印机用的。

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

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

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

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

网页中JS兑现(调用)打印预览功能?
图1.邮件右键菜单中的打印预览按钮

网页中JS兑现(调用)打印预览功能?
图2.针对邮件的打印预览页面

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

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

热点排行