首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现浏览器打印、打印预览示例

Posted in Javascript onFebruary 28, 2017

目前正在做浏览器端采用JS方式实现打印这么一个功能，JS打印实现的方法很多，但是兼容各个浏览器实现打印预览的功能有些棘手，现将实现的内容及遇到的问题记录下来，希望有大牛看到所提的问题后可以给予解答，在此感谢啦。

1.JS实现打印的方式

方式一：window.print()

window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是从网上摘到的一个局部打印的例子，该例子的不足是打印会修改页面的内容。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>局部打印案例</title> 
<script type="text/javascript">   
  function doPrint() {   
    bdhtml=window.document.body.innerHTML;   
    sprnstr="<!--startprint-->";   
    eprnstr="<!--endprint-->";   
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
    window.document.body.innerHTML=prnhtml;  
    window.print();   
}   
</script> 
</head> 
 
<body> 
<p>1不需要打印的地方</p> 
<p>2这里不要打印啊</p> 
<!--startprint--><!--注意要加上html里star和end的这两个标记--> 
<h1>打印标题</h1> 
<p>打印内容~~</p> 
<!--endprint--> 
<button type="button" onclick="doPrint()">打印</button> 
<p>不打印的地方啊哈哈哈哈</p> 
<p>2</p> 
</body> 
</html>

方式二：使用html 标签<object>引入Webbrowser控件

这种方式是其只兼容IE，其他浏览器不可使用，同时IE10以下的浏览器才可以使用，调用方式如下：

<body> 
  <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object> 
</body> 
<script> 
  WebBrowser.ExecWB(1,1) //打开  
  WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口  
  WebBrowser.ExecWB(4,1) //保存网页 
  //--------------- 常用 ---------------   
  WebBrowser.ExecWB(6,1) //打印  
  WebBrowser.ExecWB(7,1) //打印预览  
  WebBrowser.ExecWB(8,1) //打印页面设置  
  //-------------------------------------  
  WebBrowser.ExecWB(10,1) //查看页面属性  
  WebBrowser.ExecWB(15,1) //撤销  
  WebBrowser.ExecWB(17,1) //全选  
  WebBrowser.ExecWB(22,1) //刷新  
  WebBrowser.ExecWB(45,1) //关闭窗体无提示 
</script>

这种方式优势是在IE下可以弹出打印预览，这是打印很人性化的功能，但是遗憾的是高版本的IE浏览器不支持WebBrowser了

方式三：采用document.execCommand(”print”)

该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框，chrome的打印对话框自带预览功能，但是IE、火狐仅仅只弹出打印设置对话框，没有预览功能。

方式四：采用JQuery插件

使用jQuery浏览插件可以很方便的进行局部打印，常用的插件有：

1)jquery.print.js 下载地址：https://github.com/DoersGuild/jQuery.print

2)jquery.print-preview.js 下载地址：https://github.com/etimbo/jquery-print-preview-plugin

这两种方式使用都很简单，1）通过$("#id").print(/*options*/);调用；2）通过$('#id').printArea(/*options*/); 其中的option可选项可以在下载地址下载下来后看示例代码，一般options不用传即可，示例代码如下：

<html> 
<head> 
<meta http-equiv=Content-Type content="text/html; charset=utf-8"> 
<title>JQuery打印</title> 
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script> 
<script language="javascript" src="./js/jquery.print.js"></script> 
</head> 
 
<body style='margin:0 auto;text-align:center;'> 
<button id='button_print' name='button_print' onclick="javascript:printit()>打印</button> 
<div id='ganburenmianbaio' class=WordSection1 style='width:750px;margin:0 auto;text-align:center;vertical-align: middle;'> 
</div> 
</body> 
<script language="javascript"> 
function printit(){ 
  $("#ganburenmianbaio").print({iframe:true,prepend:'<br/>'}); 
} 
</script> 
</html>

方式五：采用浏览器打印第三方插件

该方式需要用户浏览器安装相关的第三方插件，用户体验不好，故在此不细述了。

2.打印预览

chrome浏览器、win10自带的IE浏览器 调用打印弹出的打印设置界面中包含打印预览部分，故其通过上面的打印函数的调用即可实现。

IE9以后的版本、火狐不支持webbrowser控件了，JS调用不了浏览器的打印预览的功能，我们只能用iframe模拟打印预览的对话框，将需要打印的内容显示在该对话框中，然后在调用打印的功能实现打印。

1）jquery打印预览插件

jquery.print-preview.js 下载地址：https://github.com/etimbo/jquery-print-preview-plugin

其实现的效果如下图（其自动的示例代码）

JS实现浏览器打印、打印预览示例

2）webbrowser控件打印预览

IE8及以下版本可以调用WebBrowser.ExecWB(7,1) 函数弹出浏览器的打印预览对话框，采用该函数的好处是 用户可以在打印预览对话框中 调整页边距、页眉、页脚；

下面贴出的是设置页边距、页眉、页脚的JS代码

//取得页面打印设置的原参数数据   
function PageSetup_temp(){   
  try   
  {   
    var Wsh=new ActiveXObject("WScript.Shell");   
    HKEY_Key="header";   
    //取得页眉默认值   
    head = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="footer";   
    //取得页脚默认值   
    foot = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="margin_bottom";   
    //取得下页边距   
    bottom = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="margin_left";   
    //取得左页边距   
    left = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="margin_right";   
    //取得右页边距   
    right = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
    HKEY_Key="margin_top";   
    //取得上页边距   
    top = Wsh.RegRead(HKEY_Root+HKEY_Path+HKEY_Key);   
  }   
  catch(e){   
     //alert("不允许ActiveX控件");   
  }   
}   
  
//设置网页打印的页眉页脚和页边距，注册表里的单位是英寸，打印设置中是毫米，1英寸=25.4毫米   
function PageSetup_Null(){   
  try   
  {   
    var Wsh=new ActiveXObject("WScript.Shell");   
    HKEY_Key="header";   
    //设置页眉（为空）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
    HKEY_Key="footer";   
    //设置页脚（为空）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");   
    HKEY_Key="margin_bottom";   
    //设置下页边距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
    HKEY_Key="margin_left";   
    //设置左页边距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
    HKEY_Key="margin_right";   
    //设置右页边距（0）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.3");   
    HKEY_Key="margin_top";   
    //设置上页边距（8）   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0.6");   
  }   
  catch(e){   
     //alert("不允许ActiveX控件");   
  }   
}   
 
//设置网页打印的页眉页脚和页边距为默认值   
function PageSetup_Default(){    
  try   
  {   
    var Wsh=new ActiveXObject("WScript.Shell");   
    HKEY_Key="header";   
    HKEY_Key="header";   
    //还原页眉   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,head);   
    HKEY_Key="footer";   
    //还原页脚   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,foot);   
    HKEY_Key="margin_bottom";   
    //还原下页边距   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,bottom);   
    HKEY_Key="margin_left";   
    //还原左页边距   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,left);   
    HKEY_Key="margin_right";   
    //还原右页边距   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,right);   
    HKEY_Key="margin_top";   
    //还原上页边距   
    Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,top);   
  }   
  catch(e){   
     //alert("不允许ActiveX控件");   
  }   
}

  使用该函数，会弹出

JS实现浏览器打印、打印预览示例

通过网页修改activex安全设置，添加信任站点，禁用该弹出窗口提示，代码如下：

function activeXControl(){ 
    try{ 
    var WshShell=new ActiveXObject("WScript.Shell"); 
     
    //添加信任站点(http://127.0.0.1) 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\",""); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\:Range","127.0.0.1"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\ZoneMap\\Ranges\\Range100\\http","2","REG_DWORD"); 
 
    //修改IE ActiveX安全设置: 1本地Intranet区域 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1001","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1004","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1200","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1201","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\1405","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\1\\2201","0","REG_DWORD"); 
 
    //修改IE ActiveX安全设置:2受信任的站点区域 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1001","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1004","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1200","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1201","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\1405","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\2\\2201","0","REG_DWORD"); 
     
    //修改IE ActiveX安全设置:3Internet区域 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1001","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1004","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1200","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1201","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1405","0","REG_DWORD"); 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\2201","0","REG_DWORD"); 
 
    //禁用Winxp弹出窗口阻止程序 
    WshShell.RegWrite("HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\New Windows\\PopupMgr","no"); 
  }catch(e){   
     //alert("不允许ActiveX控件");   
  }   
}

3.问题

1）网页修改activex安全设置该段代码也是必须在启用ActiveX的条件下调用成功，是需要用户在Internet的配置项中设置的(如下图），如何才能自动启用该插件？

JS实现浏览器打印、打印预览示例

2) chrome、火狐如何通过JS设置页边距、页眉、页脚?

3) IE高版本浏览器、火狐如何通过JS弹出浏览器自己的打印预览?

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现浏览器打印、打印预览示例

- Author -

风水月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
七个很有意思的PHP函数
May 12 Javascript
javascript解三阶幻方（九宫格）
Apr 22 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
javascript严格模式详解（含严格模式与非严格模式的区别）
Nov 12 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 #Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 #Javascript
jQuery图片切换动画效果
Feb 28 #Javascript
jQuery 判断元素整理汇总
Feb 28 #Javascript
jQuery倒计时代码(超简单)
Feb 27 #Javascript
js实现图片左右滚动效果
Feb 27 #Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 #Javascript
轮询锁(1) 索引树扫描(1) 远程连接(2) geoserver(1) into outfile(1) 异步机制(1) 限流器(1) 逻辑备份(1) 全表扫描(1) sql模式(1)
You might like
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
简单JS代码压缩器
2006/10/12 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jQuery 回调函数（callback）的使用和基础
2015/02/26 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
PyTorch搭建一维线性回归模型（二）
2019/05/22 Python
python反转列表的三种方式解析
2019/11/08 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
法国最大电子商务平台：Cdiscount
2018/03/13 全球购物
size?德国官方网站：英国伦敦的球鞋精品店
2018/03/17 全球购物
Travelstart沙特阿拉伯：廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Urban Decay官方网站：美国化妆品品牌
2020/06/04 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
2015年加油站工作总结
2015/05/13 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
如何做好员工培训计划？
2019/07/09 职场文书
导游词之五台山
2019/10/11 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript