调用打印预览（兼容除火狐以外各浏览器）

网页打印技巧

最新推荐文章于 2022-08-31 10:07:37 发布

weixin_30707875

最新推荐文章于 2022-08-31 10:07:37 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kittyll/p/6122801.html

本文介绍两种网页打印的方法：一是通过创建绝对定位的DIV容器并利用显示/隐藏效果；二是使用媒体查询定义样式，针对不同浏览器特性提供解决方案。适用于Chrome、Firefox、IE等浏览器。

思路1：建立一个DIV（容器），绝对定位，宽高100%，遮住整个屏幕。里面放置打印内容。首先DISPLAY:NONE.调用打印命令以后，DISPLAY:BLOCK.打印完后再隐藏。

　　　但是在IE下，会打印所有没有隐藏的界面，即使内容被遮盖。所以要用否定选择器找到BODY下的所有子元素，设置visibility:hidden属性。打印完后再visibility:visible。

　　　　CSS如下

　　　　.printContent{

　　　　 position:absolute;

　　　　　　display:none;

　　　　　　background:#fff;

　　　　　　width:100%;

　　　　　　height:100%;

　　　　　　z-index:9999;

　　　　}

思路2：利用media="print"的媒体查询，定义样式（IE8及以上支持）

　　css:

　　　　 .noprint{display:none}//给不需要打印的地方添加此类。

　　</style>

关于JS：

　　　在ghrome/opera/下，直接调用window.print()命令就会有打印预览框。

　　在火狐下，window.print()由于安全性无法调用打印预览，只有选择打印机的打印命令框。

　　在IE下，此功能的实现主要是利用WebBrowser控件的函数接口来实现打印、打印预览（默认的）、页面设置（默认的）。

　　将此句贴到页面BODY内。

　　　　<object ID='WebBrowser' WIDTH=0 HEIGHT=0
　　　　CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>

　　调用以下命令即可:
　　//打印
　　WebBrowser1.ExecWB(6,1);
　　//打印设置
　　WebBrowser1.ExecWB(8,1);
　　//打印预览
　　WebBrowser1.ExecWB(7,1);
　　如果打印的页面是iframe，调用：
　　window.parent.document.iframename.ExecWeb(7,1);//iframename为iframe的name
　　如果打印的页面是当前页面：调用：
　　window.parent.document.all.ExecWeb(7,1);


　　谷歌下的JS：

　　var divPrint = $('.printContent');

　　divPrint.css({

  　　  'display':'block'
　　});
　　window.print();
　　divPrint.css('display','none');

　　IE下的JS：

　　$('body').children(":not(.printContent)").css({
　　    'visibility':"hidden",
　　});
　　divPrint.css({
　　    'display':'block'
　　});

　　if(iframeName != undefined){//如果打印页面是iframe
 　　   window.parent.document.all[iframeName].ExecWB(7,1);
　　}
　　else{
   　　 document.all.WebBrowser.ExecWB(7,1);
　　}

　　$('body').children(":not(.printContent)").css({
   　　 'visibility':"visible"
　　});
　　divPrint.css('display','none');