基于jQuery实现网页打印功能


Posted in Javascript onDecember 01, 2015

直接上代码

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>index</title>
</head>
<body>
  
  <div style="text-align:center; margin-top: 30px">
    <div id="printArea">
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
    </div>  
  
    <br>
    <br>
  
    <input id="btnPrint" type="button" value="打印文本区域"></input> 
    <input id="btnPrintFull" type="button" value="全屏打印"></input> 
  </div>
</body>

<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.PrintArea.min.js"></script> 

<script> 
  $("#btnPrint").click(function(){  
    $("#printArea").printArea(); 
  }); 

  $("#btnPrintFull").click(function(){  
    $("body").printArea(); 
  }); 
  
</script>

</html>

代码 jquery.PrintArea.min.js:

(function(c){function g(){var b="<head><title>"+d.popTitle+"</title>";c(document).find("link").filter(function(){return"stylesheet"==c(this).attr("rel").toLowerCase()}).filter(function(){var a=c(this).attr("media");return void 0==a?!1:""==a.toLowerCase()||"print"==a.toLowerCase()}).each(function(){b+='<link type="text/css" rel="stylesheet" href="'+c(this).attr("href")+'" >'});return b+="</head>"}function h(b){return'<body><div class="'+c(b).attr("class")+'">'+c(b).html()+"</div></body>"}function k(b){c("input,select,textarea",b).each(function(){var a=c(this).attr("type");"radio"==a||"checkbox"==a?c(this).is(":not(:checked)")?this.removeAttribute("checked"):this.setAttribute("checked",!0):"text"==a?this.setAttribute("value",c(this).val()):"select-multiple"==a||"select-one"==a?c(this).find("option").each(function(){c(this).is(":not(:selected)")?this.removeAttribute("selected"):this.setAttribute("selected",!0)}):"textarea"==a&&(a=c(this).attr("value"),c.browser.mozilla?this.firstChild?this.firstChild.textContent=a:this.textContent=a:this.innerHTML=a)});return b}function l(){var b=d.id,a;try{a=document.createElement("iframe"),document.body.appendChild(a),c(a).attr({style:"border:0;position:absolute;width:0px;height:0px;left:0px;top:0px;",id:b,src:""}),a.doc=null,a.doc=a.contentDocument?a.contentDocument:a.contentWindow?a.contentWindow.document:a.document}catch(e){throw e+". iframes may not be supported in this browser.";}if(null==a.doc)throw"Cannot find document.";return a}function m(){var b;b="location=no,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no,width=595px,height=842px,top=0,left=0,toolbar=no,scrollbars=no,personalbar=no"+(",resizable=yes,screenX="+d.popX+",screenY="+d.popY+"");b=window.open("","_blank",b);b.doc=b.document;return b}var f=0,n={mode:"iframe",popHt:500,popWd:400,popX:200,popY:200,popTitle:"",popClose:!1},d={};c.fn.printArea=function(b){c.extend(d,n,b);f++;c("[id^=printArea_]").remove();b=k(c(this));d.id="printArea_"+f;var a,e;switch(d.mode){case"iframe":e=new l;a=e.doc;e=e.contentWindow||e;break;case"popup":e=new m,a=e.doc}a.open();a.write(("iframe"!=d.mode&&d.strict?'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01'+(0==d.strict?" Trasitional":"")+'//EN" "http://www.w3.org/TR/html4/'+(0==d.strict?"loose":"strict")+'.dtd">':"")+"<html>"+g()+h(b)+"</html>");a.close();e.focus();e.print();"popup"==d.mode&&d.popClose&&e.close()}})(jQuery);

二、效果图

打印文本区域:

基于jQuery实现网页打印功能

全屏打印:

 基于jQuery实现网页打印功能

还有一些高手提出的window.print() 方法也是可以滴,在这就不一一介绍了,希望大家认真研究网页打印功能的实现方法,小编和大家共同进步。

Javascript 相关文章推荐
JS版元素周期表实现方法
Aug 05 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 #Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 #Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 #Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 #Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 #Javascript
You might like
PHP多进程编程实例
2014/10/15 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python和opencv实现抠图
2018/07/18 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
早会主持词
2014/03/17 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
新闻报道策划方案
2014/06/11 职场文书
争先创优公开承诺书
2014/08/30 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Mysql排序的特性详情
2021/11/01 MySQL