小工具      在线工具  汉语词典  css  js  c++  java

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

JS,批量打印 额外说明

收录于:116天前

前面之所以讲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.οncοntextmenu=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}都是从后台传递过来的数据。

. . .

相关推荐

额外说明

Linux Socket网络编程循环相互通信

 一  效果展示 持续互相通信,上面是服务端,下面为客户端加上ip,最后客户端输入exit退出  二 代码展示 服务端 /*server.c*/ #include <sys/types.h> #include <sys/socket.h> #includ

额外说明

leetcode947(删除同一行或同一列中最多的石头:并集搜索)

n 块石头放置在二维平面中的一些整数坐标点上。每个坐标点上最多只能有一块石头。 如果一块石头的 同行或者同列 上有其他石头存在,那么就可以移除这块石头。 给你一个长度为 n 的数组 stones ,其中 stones[i] = [xi, yi] 表示第

额外说明

Springboot中 主键自增, 分布式自增id, 雪花算法等 [雪花先写]

springboot中 主键自增, 分布式自增id, 雪花算法等  来看看每种实现逻辑 1. 主键自增 NOT NULL  PRIMARY KEY (`id`)  AUTO_INCREMENT 2. 分布式自增id  2.1 jedis篇 2.2 red

额外说明

获取和配置Servlet的初始化参数

配置Servlet的初始化参数有两种: 1、使用注解方式@WebServlet 在注解中设置Servlet的初始化参数,需要配置name,urlPatterns,inintParams的值 name等价于web.xml配置文件中的<servlet-nam

额外说明

springboot基本包引入

springboot基本包引入 当我们创建一个springboot项目时我们需要一个springboot的项目依赖,这个依赖添加后标志着着这个maven项目成为了一个speingboot项目,依赖如下 <dependency> <groupId

额外说明

C语言刷题(9)

第一题  第一考察逗号表达式,实际应分为三个语句看分别是 int a[12]={....} int *p[4] int i 那么就可以知道p是一个整形指针 再就是  第二题   第三题    第四题  考察字符的本质是ASCII码值 第五题  容易认为x

额外说明

newstyles项目实战(十六)CMS管理系统之内容展示,内容添加

内容展示:  上几节我们能够创建新的节点,修改节点的名称,通过业务的分析可以知道,这些节点其实就是我们要管理的广告的类目,所以这次我们需要对内容,也就是广告进行管理,由此我们我们需要分析一下内容管理的业务逻辑。      当我们选择某一个类目时,就会出现

额外说明

Ctfhub - web -- SQL注入

SQL注入 1.整型注入 2.字符型注入 3.报错注入 4.布尔盲注 方法一:sqlmap 方法二:python脚本 1.整型注入 随便输入一个1,很明显这里已经给出了字段,不需要再order by了 1.数据库名和版本。这里发现是高版本,有inform

额外说明

vue中对接Graphql接口(完整版)

说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点,可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的 一、对原来的Express返回Graphql项目修改 本章节使用的代码

额外说明

wordpress 缩略图_如何在WordPress主题中创建张贴缩略图的网格显示

WordPress 缩略图 When creating WordPress site designs, have you ever had the urge to create a grid display of posts? The grid layo

ads via 小工具