实现的打印功能大致跟浏览器的 Ctrl+P 效果一样

一、直接上代码

 <!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);

二、效果图

　　打印文本区域:

　　全屏打印：

三、下面的大哥提出了 window.print() 方法也是可以滴

jQuery：实现网页的打印功能的更多相关文章

  1. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  2. 使用FastReport.net 报表在网页上实现打印功能

    这些年的工作当中,最早是在8年前接触到FastReport这个报表工具,从名字上来看,直译过来就是快速报表,正所谓天下武功,唯快不破,FastReport报表早些年确实是制作报表的不二之选,8年前的工 ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. 开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  5. 网页WEB打印控件

    网页WEB打印控件制作 在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的 ...

  6. 在react中实现打印功能

    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...

  7. react + antd 实现打印功能（踩了不少坑）

    最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打 ...

  8. 【JS】通过JS实现超市小票打印功能——ActiveX控件

    应客户的需求= = ,要在网页端实现打印小票的功能 先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢: 我想应该是有三种吧 1.用第三方的浏览器控件(这个好 ...

  9. JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法, 第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用. document.execCommand("Copy") ...

随机推荐

  1. 消息队列 Kafka 的基本知识及 .NET Core 客户端

    前言 最新项目中要用到消息队列来做消息的传输,之所以选着 Kafka 是因为要配合其他 java 项目中,所以就对 Kafka 了解了一下,也算是做个笔记吧. 本篇不谈论 Kafka 和其他的一些消息 ...

  2. .NET Core 首例 Office 开源跨平台组件（NPOI Core）

    前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...

  3. macOS 我的装机

    最近多次配置 Mac 的开发环境,稍微记录一下 1 创建无付费信息的Apple ID 2 Xcode ​ gem 源更改 3 Alfred 4 微信 5 SourceTree 6 Sublime Te ...

  4. Android学习探索之Java 8 在Android 开发中的应用

    前言: Java 8推出已经将近2年多了,引入很多革命性变化,加入了函数式编程的特征,使基于行为的编程成为可能,同时减化了各种设计模式的实现方式,是Java有史以来最重要的更新.但是Android上, ...

  5. 独立开发 一个社交 APP 的架构分享 (已实现)

    (本博客为原创:http://www.cnblogs.com/linguanh/)   My BananaCloud Android Application 前言:  这算是我的第一个 完完全全 由自 ...

  6. Kafka副本管理—— 为何去掉replica.lag.max.messages参数

    今天查看Kafka 0.10.0的官方文档,发现了这样一句话:Configuration parameter replica.lag.max.messages was removed. Partiti ...

  7. 2016/12/28_javascript

    今天学习的主要内容: javascript: 1.if语句,switch语句,while循环以及for循环: 1)if语句 if(boolean){}; if(boolean){} else if(b ...

  8. 【从零开始学BPM，Day3】自定义表单开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  9. Oracle 10g安装教程

    首先下载安装文件,打开后文件结构如图所示: 安装之前请关闭Windows防火墙并断开网络. xp系统下直接双击运行(本经验以XP系统安装为例进行讲述). 如果是在win7上安装,如图:在setup文件 ...

  10. JAAS 是个什么梗

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...