批量打印之jquery局部打印和smsx.cab打印联合使用

MMMMMMMay

2017-10-12

关注关注

前面之所以讲Jquery的打印和smsx.cab打印，是因为最近用的项目里边需要把两个都结合起来才能实现效果。

基本业务是这样子的：同时打印多个人的简历，要求每个人的打5份，自动打印，且有进度条显示。

为什么需要用到两种打印方式：既然是自动打印就不能弹出打印机选择框那么只能是smsx.cab，而使用

smsx.cab打印时就需要将进度条信息隐藏起来否则进度条也会被打印进去。所以两个要综合起来用。

最后的思路就是：打印时使用smsx.cab设置好打印机弹出框信息和页眉页脚页边距，然后使用Jquery局部打印的原理将打印内容和样式拷贝到一个新的iframe中，再调用smsx.cab进行打印。

效果就不截图了，直接上代码：

1、打印的基本机构：这里是打印了5个人的，若有多的人直接在后面添加div即可。进度条的样式已上传到附件。

<%--需要打印的内容--%>
    <div class="box" id="page1">简历基本信信息</div><%--当前正在打印 --%>
    <div class="box" id="page2" style="display: none;">简历基本信信息</div>
    <div class="box" id="page3" style="display: none;">简历基本信信息</div>
    <div class="box" id="page4" style="display: none;">简历基本信信息</div>
    <div class="box" id="page5" style="display: none;">简历基本信信息</div>
<%--进度条 --%>
<div id="container">
	<div class="content">
		<p id="allUserInfo"></p>
		<p>正在打印：<span id="curUserInfo"></span></p>
	</div>
	<div id="progress_bar" class="ui-progress-bar ui-container">
		<div class="ui-progress" id="ui-progress" style="width: 0%;">
			<span class="ui-label"><b class="value" id="curProgress">0%</b></span>
		</div>
	</div>	
</div>
<%-- 遮罩层 --%>
<div id="zhegai" style="z-index:100;width:100%;height: 100%;top:0px;left:0px;position:absolute;filter:Alpha(Opacity=50);background:#000000;-moz-opacity: 0.5; opacity:.50; " ></div>

2、js处理：

var count = '${count}';//总共有几个人的简历需要打印
var userInfo = '${userInfo}';//打印简历的人的姓名，字符串，以中文半角的逗号分开
var printContent = "打印简历的人员："+userInfo;
var pages = 5;//打印5份

var array = userInfo.split("，");
var current = 1;
var iframe = null;//打印用的iframe
var timeOut = (pages*3*2)*1000;//30秒之后再执行下一个:假设每个人的简历有3页每页打2秒
$(function() {
	$("#allUserInfo").text(printContent);//显示需要打印的所有内容
	unScroll();//禁止滚动条滚动
	printTZS();//页面加载完成后直接打印
});
// 主页面不允许右键（兼容多浏览器）
document.oncontextmenu=function(e){
     return false; 
};
//禁止页面点击
$(document).click(function(event){
	return false;
});
//该方法用来打印简历信息
function printTZS(){
	//计算进度条信息
	calcProgress();
	
	//移除已经打印完成的简历信息
	if(current>1){//说明至少到第二个人了，那么需要移除掉前面的人的简历信息
		$("#page"+(current-1)).remove();
	}
	//显示正在打印的简历信息
	$("#page"+current).show();

	//进行打印
	printArea($("#page"+current));
	
	current++;
	//循环打印
	if(current<=count){//说明还没有打完，那么继续打
		//printTZS();
		window.setTimeout(function(){
			printTZS();//timeOut秒后再打
		}, timeOut);
	}else{//说明打印完成，跳转到上一页
		history.back();
	}
}
//该方法用来计算进度条信息
function calcProgress(){
	//显示进度条信息
	$("#curUserInfo").text(array[current-1]);//当前正在打印的简历信息
	//计算进度
	var progress = ((current/count).toFixed(2))*100;
	//alert(progress);
	$("#ui-progress").css("width",progress+"%");
	$("#curProgress").text(progress+"%");
}

//禁止滚动条滚动
function unScroll() {
    var top = $(window).scrollTop();
    $(window).scroll(function() {
    	$(window).scrollTop(top);
	});
}

/**
*该方法用来打印简历信息（根据Jquery的局部打印进行修改而来）
*@param obj:需要进行打印的区域
*/
function printArea(obj){
	var $this = $(obj);
	if(current==1){//说明是第一次打印，那么需要添加iframe
		var iframeId = "printArea";//iframe的id
		var iframeStyle = "position:absolute;width:0px;height:0px;left:-500px;top:-500px;";
		iframe = document.createElement("IFRAME");//创建ifreame
		
		//添加属性
		$(iframe).attr({
			style : iframeStyle,
			id : iframeId
		});
		document.body.appendChild(iframe);//添加到document中
		var doc = iframe.contentWindow.document;
		
		//添加css样式
		$(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") + '" >');
		});
		//添加Object控件
		doc.write("<OBJECT id=\"factory\" codeBase=\"redist/smsx.cab#Version=6,3,434,26\" height=\"0\" width=\"0\" classid=\"clsid:1663ed61-23eb-11d2-b92f-008048fdd814\" viewastext></OBJECT>");
	}
	var doc = iframe.contentWindow.document;
	
	//清空先前打印的数据
	var $printNode = $(doc.getElementById("printDiv"));
	$printNode.remove();
	
	//添加盛放打印内容的div
	var printNode = doc.createElement("div");//创建ifreame
	printNode.setAttribute("id","printDiv");
	printNode.setAttribute("class",$this.attr("class"));
      
	doc.body.appendChild(printNode);//添加到document中
	
	$printNode = $(printNode);
	//将需要打印的内容添加iframe中
	var html = $this.html();
	for(var i=0;i<pages;i++){//打印pages份
		if(i==0){$printNode.html(html);}
		else{$printNode.append(html);}
		//除了最后一份，其他(pages-1)份最后都需要添加分页打印的代码
		if(i<pages-1){
			$printNode.append("<div style=\"page-break-before: always;width: 500px;\" ></div>");
		}
	}
	doc.close();//关闭文档
	
	//调用iframe框进行打印
	var frameWindow = iframe.contentWindow;
	frameWindow.close();
	frameWindow.focus();
	var factory = frameWindow.document.getElementById("factory");
	
	//进行打印设置
	factory.printing.header = ""; // 页眉
	factory.printing.footer = ""; // 页脚
	factory.printing.portrait = true; // true为纵向打印，false为横向打印
	factory.printing.leftMargin = 19.05;
	factory.printing.topMargin = 0;
	factory.printing.rightMargin = 0;
	factory.printing.bottomMargin = 0;
	factory.printing.Print(false);//进行打印,false:不弹出打印框让选择打印机
}

说明：${count}和 ${userInfo}都是从后台传递过来的数据。

jquery