批量打印之jquery局部打印
上个月弄了个批量打印的功能,觉得以后可能用得着,就写个博客记一下,免得忘记了。说这个之前,先来说一下我用过的两个打印插件,一个是Jquery打印插件(这次开始用的),一个是smsx.cab控件的打印插件。这里先说jQuery的局部打印功能(个人觉得jqprint和PrintArea就打印功能这块大同小异,所以就说简单点的PrintArea)
1、导Jquery库:想用Jquery的功能就得有人家的内库嘛,这个是毋庸置疑的。
2、导入jquery.PrintArea.js:在导入jquery库之后导入。其源码如下:
(function($) {var printAreaCount = 0;$.fn.printArea = function() {var ele = $(this);var idPrefix = "printArea_";removePrintArea(idPrefix + printAreaCount);printAreaCount++;var iframeId = idPrefix + printAreaCount;var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';iframe = document.createElement('IFRAME');$(iframe).attr({style : iframeStyle,id : iframeId});document.body.appendChild(iframe);var doc = iframe.contentWindow.document;$(document).find("link").filter(function() {return $(this).attr("rel").toLowerCase() == "stylesheet";}).each(function() {doc.write('<link type="text/css" rel="stylesheet" href="'+ $(this).attr("href") + '" >');});doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()+ '</div>');doc.close();var frameWindow = iframe.contentWindow;frameWindow.close();frameWindow.focus();frameWindow.print();}var removePrintArea = function(id) {$("iframe#" + id).remove();}; })(jQuery);
3、demo:
<input type="button" id="btnPrint" value="打印"/>
<div id="printContent">要打印的内容区域<div><script type="text/javascript">
$(function(){$("#btnPrint").click(function(){ $("#printContent").printArea(); });
});
</script>
4、说一个可能遇到且我已经解决的问题:打印出来的东东没有样式。
解决方法:将页面中<style>标签中的样式全部摘出来放到一个css文件中去,然后将这个css文件引入到页面上来。
为什么这样子可以解决:
先看jquery.PrintArea.js的源码,它的实现原理基本上可以理解成这样子:
点击“打印”时,它先在页面中生成一个iframe(宽高为0,left、top为-500,这样子在当前页面就看不到这个frame了),
然后将页面里边引入的(link方式)css文件也引入到iframe中,
再将选定区域(jquery选择器选定的对象)的内容复制到iframe中,
最后调用系统的print()方法进行打印。
理解了源码之后,再来理解“打印出来的东西没有样式“”也就容易了,因为它只是处理了<link>标签中的样式,木有处理<style>中的样式呀。
顺便再多嘴一句:在解决这个问题时,看到有人说处理将css内容摘到一个文件里边之外,还需要在<link>标签中添加"media=print",我试着加了下打印出来是有样式,但是页面显示的却没有样式了。也不知道是我写的有问题,还是哪里又不对。
5、说一说优点:
至少有两个:a、可以局部打印,想打哪块打哪块,不需要在打印时顾虑其他的不相干内容也打印出来了;b、兼容性好,因为调用的是window对象的print()方法,且浏览器都支持这个方法(试了IE8、IE11、火狐、谷歌、360、QQ,效果都不错);
6、说一说缺点:
也至少有三个:a、打印的时候每次都要弹出打印框让选择打印机,这个在自动打印的情况下比较烦人;b、自带页眉页脚,打印时如果不进行页面设置会自动加上页眉页脚且不太好去掉,也需要手动设置页边距,这个也比较烦人。c、不带预览,需要使用其他插件进行预览,如jquery-print-preview-plugin-master(有点复杂)。
批量打印之jquery局部打印相关推荐
- 浏览器调用打印功能打印页面内容(可全局打印,可局部打印)
function printhtml() {var ht = $('#xxx').html(); //局部打印,全局打印的话直接调用windows.document.print()即可var h = ...
- jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种. 最初使用的是jquery.jqprint ...
- js实现(可实现局部打印)
1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" οncli ...
- jqprint 分页打印_JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...
- js网页打印,js打印,javascript局部打印,网页局部打印方法
一.css控制网页局部打印 举例: <div class="noprint" > <table style="margin:0 auto;width:5 ...
- Jquery网页打印
今天做项目中,需要用到打印功能,开始的时候用js来调用打印机,之后样式,还有什么的都没有了,之后ie有时候还运行不了,后来就在网上找,之后发现jquery有打印插件,所以就用了,并且发现jquery打 ...
- HTML局部打印,区域打印的两种实现方法总结
在开发中,有时需要实现页面的局部打印功能,不打印页面上不需要的区域, 例如页面: <div>aaaaaaaaaaaaaaaaaaa</div><div>bbbbbb ...
- php打印js函数,JS局部打印方法
这篇文章我们和大家分享一个非常简单的技术,JS实现局部打印,web打印有很多种,那么JS打印也有多种方法,现在我们就教大家一种JS实现局部打印的方法. 局部打印案例 function doPrint( ...
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
最新文章
- 高精度除以低精度板子
- 【分析】大数据爆破之年:在这5个领域“掘金”最靠谱
- Paxos算法与Zookeeper分析
- ansible(1)——安装
- 关于div容器高度随着浏览器宽度按照宽高比自适应的问题(css解决方案)
- 2013年c语言课后作业答案,2013年计算机二级C语言课后模拟题三及答案
- 蓝桥杯 友好数 数论
- 我的第一个C++程序,还像个C++c程序的样子吧
- LDAP密码认证例子
- 关于音游,除了节奏大师,你还熟悉哪些?
- 2020 IJCAI 接受论文 list 分类排列(一)
- vue 项目打印时去掉页眉页脚
- 惠普笔记本重装系统 BIOS设置
- android 开发相机焦距解析之调节远近焦距
- Unity得到屏幕宽度
- 【git】报错unsafe repository xxx is owned by someone else解决方法
- 六边形3d立体缩放动画js特效
- $(this).val()、this.id、$(this).attr(idCard)和复选框
- bugku 把猪困在猪圈里
- 循环结构简单题之分硬币
热门文章
- Oracle:数据库备份之exp与imp的使用(切记,不能在plsql或sqlplus中使用)
- MySQL如何保证高可用
- 电影《一诺千金》剧照首度曝光系列一
- 【线性代数】第六章——二次型
- OpenWrt之IPTV双线融合教程
- CDH 安装,CDH中安装Nifi
- 中本聪论文_浏览器中本机智能卡支持的案例
- 1.Barry Schwartz: What role does luck play in your life? | TED Talk
- “电子商务促进乡村振兴十佳县域案例”火热征集中
- uboot下tftp下载文件失败的排查步骤