网页中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.针对邮件的打印预览页面
虽然微软也这样干,不过看看这个打印预览,连最基本的需要几张纸都看不到,是不是太不体贴了?而浏览器中的打印预览——纸张数量,页面边距、页面大小、横向竖向、打印背景、文档标题等等,两者相比较,选择在页面中加入打印预览功能的理由是什么?
我是绝对不会用的,但是有人要用,那就是有需求!
分享到:
相关推荐
ie浏览器下,完整的描述用js调用ie打印预览的功能
js实现打印预览!在IE浏览器中测试有效.值得下载看看!资源免费,大家分享!!
第一次放资源,希望支持,赚点分,同时帮助大家
js调用word打印预览,用JS实现WORD的打印与打印预览功能
适用于网页打印,打印预览
js打印实现各个浏览器预览插件,比如IE,谷歌,火狐浏览器.
test.html 每个按钮调用一个函数,实现打印指定区域,可预览,可设置
JavaScript 实现打印,打印预览,打印设置;JS打印和报表输出;原生js打印插件Print.js;js控制分页打印、打印分页示例;js 打印插件;js使用window.print()实现打印功能;代码仅5kb; 自主研发的一个轻量级超简单的js...
本篇文章主要介绍了JS实现浏览器打印、打印预览示例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前端LodopFuncs.js打印,js打印,web打印,jq打印,html打印,不需要经过预览页面 直接调起默认打印机进行局部打印。该打印js可局部打印也可全局打印而且该驱动试用版也能正常使用打印功能。局部打印功能和jQuery....
NULL 博文链接:https://guoliangheyuqin.iteye.com/blog/1664562
Lodop是专业Web打印控件,类型为ActiveX插件,用它既可裁剪输出页面内容, 又可用程序代码生成复杂打印页。该控件功能异常强大,却简单易用。 功能用JavaScript调用
3.根据HTML传输到快递鸟组件,实现打印预览功能 前提需要下载并预先打开快递鸟的打印组件 http://www.kdniao.com/documents-instrument 根据本地电脑下载64位或者32位 HTML的注意事项: 1.首先引入快递鸟组件...
<!... , initial-scale=1.0"> ... //打印预览整个页面。 window.print(); //恢复整个页面到打印前的内容。 $('body').html(selfhtml); } ps.onclick = function () { preview('cc'); } </html>
本文实例讲述了JavaScript调用浏览器打印功能的方法。分享给大家供大家参考。具体如下: 1. 通用型,支持IE,Firefox,Chrome… 代码如下:window.print(); 2. 只支持IE打印: [removed] var print=function(){ /** ...
使用js代码来控制IE中的打印预览效果,包含多个版本
js打印设置页边距,设置页眉页脚,初始化页眉页脚,左右边距
js调用打印机代码,可以直接对网页进行打印预览,设置,打印
今天要做一个打印网页的小功能,直接调用window.print(),但是打印出来后,字体总是缩小一号,找不到原因。。。 后来尝试用一个IE的打印控件,但仅支持ie有点恶心,只能返回去继续找原因 原来,我要打印的页面因为是...
在线pdf预览插件pdfobject.js设置参数使用pdf预览器打印下载