jquery jqprint 打印

介绍：

jqprint是一个基于jQuery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以打印网页上的某个区域，这是个亮点。比如说现在要打印如下的一个效果：

我们可以通过写代码完成上述的效果，然后单击网页上的某个按钮，在按钮的处理方法里调用jqprint()，来完成这个区域的的打印显示的操作，首先要获取这个区域，然后调用一个方法即可了，如下所示：

[javascript] view plain copy print?
$("#visaReport").jqprint({});

以我的曾经做过代码为例子

图例

html

/*在html需要有一块区域用来放打印内容的*/


	

	

js进行动态填充

/*对应动态的数据填充，各位可以自己删掉然后写死数据进行查看*/

$("#printBtn").click(function(){
    goodsPrint(mainData);
});

//干线运输商品明细打印
	function goodsPrint(mainData){
		mutils.post({
			url: '/trunklinesch/getGoodsPrint',
			data: {
				tranDeliverBillId:mainData.TRAN_DELIVER_BILL_ID,
			},
			success: function(result) {
				if (result.success) {
					var data = result.data;
					var content =printGoodsTemplate(data.topData,data.bodyData,mainData);
					$("#printContet").append(content);
					print("printContet");//调用打印
				}
			}
		});
	}

//打印运输商品明细模板
	function printGoodsTemplate(topData,bodyData,mainData){
		var dataContet =""+
			"
" + 
			"		
" + 
			"
"+$("#distDeptCode").next().find("input").val()+"物流中心     本单视同 
"+
			"
干线运输单（商品明细）准运证
"+
			/*"		    
1/1
" + */
			"		
" + 
			"		" + 
			"		    " + 
			"		      " + 
			"		    " + 
			"		    " + 
			"		        " + 
			"		        " + 
			"		        " + 
			"		        " + 
			"		        " + 
			"		        " + 
			"		        " + 
			"				" + 
			"		    ";
		for(i in bodyData){
			dataContet+= ""+
					        ""+
					        ""+
					        ""+
					        ""+
					        ""+
					        ""+
					        ""+
					        ""+
					    "";
		}	
		dataContet+="		
" + 
			"		      
" + 
			"			      	
" + 
			"			      		
干线运输单号："+isNullOrUndef(mainData.TRAN_DELIVER_BILL_ID)+"
" + 
			"			      		
 目的站点：	   "+isNullOrUndef(topData.DELIVER_DATE)+"
" + 
			"			      		
 送货日期："+isNullOrUndef(topData.DIST_STATION_NAME)+"
" + 
			"			      	
" + 
			"			      	
" + 
			"			      		
封签号："+isNullOrUndef(topData.SEAL_OFF_NO)+"
" + 
			"			      		
车辆牌号："+isNullOrUndef(topData.VEHICLE_TRADEMARK)+"
" + 
			"			      		
车辆型号："+isNullOrUndef(topData.VEHICLE_MODEL_NAME)+"
" + 
			"			      		
驾驶员："+isNullOrUndef(topData.DELIVER_NAME)+"
" + 
			"			      	
" + 
			"		      
" + 
			"		      
货主
业务类型
商品代码
商品名称
订单数
单位
单价
数量
"+isNullOrUndef(bodyData[i].SUPPLY_NAME)+"
"+isNullOrUndef(bodyData[i].OPER_TYPE_NAME)+"
"+isNullOrUndef(bodyData[i].BRAND_ID)+"
"+isNullOrUndef(bodyData[i].BRAND_NAME)+"
"+isNullOrUndef(bodyData[i].QTY_ORDER_COUNT)+"
"+isNullOrUndef(bodyData[i].UNIT_NAME)+"
"+isNullOrUndef(bodyData[i].TRADE_PRICE)+"
"+isNullOrUndef(bodyData[i].QTY_ORDER)+"
" + 
		"  
" +
		"	    
" +
		"	      	总运输计划数： "+isNullOrUndef(topData.QTY_TRAN_PLAN_BILL_COUNT)+"" +
		"	    
" +
		"	    
" +
		"	      	总送货单数： "+isNullOrUndef(topData.QTY_DELIVER_COUNT)+"" +
		"	    
" +
		"	    
" +
		"	      	总卷烟数量（件）： "+isNullOrUndef(topData.QTY_ORDER_SUM_JY)+"" +
		"	    
" +
		"	    
" +
		"	      	总非烟数量： "+isNullOrUndef(topData.QTY_ORDER_SUM_FY)+"" +
		"	    
" +
		"	    
" +
		"	      	总广宣品数量： "+isNullOrUndef(topData.QTY_ORDER_SUM_GXP)+"" +
		"	    
" +
		" 	
" +
		"  
" +
		"	    
" +
		"	      	出发确认日期： "+isNullOrUndef(topData.START_DATE)+"" +
		"	    
" +
		"	    
" +
		"	      	出发确认人员： "+isNullOrUndef(topData.START_PERSON_NAME)+"" +
		"	    
" +
		" 	
" +
		"  
" +
		"	    
" +
		"	      	到达确认日期： "+isNullOrUndef(topData.ARRIVE_DATE)+"" +
		"	    
" +
		"	    
" +
		"	      	到达确认人员： "+isNullOrUndef(topData.ARRIVE_PERSON_NAME)+"" +
		"	    
" +
		" 	
" +
		"  	
" +
		"	    
" +
		"	      	运输时长（小时）：  "+isNullOrUndef(topData.TRAN_DELIVER_TIME)+"" +
		"	    
" +
		"	    
" +
		"	      	操作人： "+isNullOrUndef(topData.OPER_PERSON_NAME)+"" +
		"	    
" +
		"	    
" +
		"	      	打印日期： "+getTime()+"" +
		"	    
" +
		"  	
" +
		"  
 ";
		
		return dataContet;
	}


    //jqPrnt 打印
	function print(elemId){
		$('#'+elemId).show();
		$('#'+elemId).print({
			debug: true,
			globalStyles: true,
        	mediaPrint: false,
        	stylesheet: null,
        	noPrintSelector: ".no-print",
        	iframe: true,
        	append: null,
        	prepend: null,
        	manuallyCopyFormValues: true,
        	deferred: $.Deferred().done(function(){
        		$('#'+elemId).hide();
        	}),
        	timeout: 10000,
        	title: null,
        	doctype: ''
		});
		$('#'+elemId).hide();
		
	}


//去空
	function isNullOrUndef(str){
		if((str == null || str == undefined || str == "") && str!=0){
			return "";
		}
		return str;
	}
	
	//获取当前时间
	function getTime(){
		var date = new Date();
		var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +date.getHours()+ ":" + date.getMinutes()+":"+date.getSeconds();
		return d;
	}

基础参数介绍

而打印出来的效果确是第一张图的样式，这就是指定了media=print这个属性之后，打印的时候会加载一个css文件所配置的。如下所示：

[html] view plain copy print?


jqprint这个插件能够解决我们大部分开发中，Web页面打印的问题，打印的样式也是可控的。有时需要我们要为其指定一些属性，才能完成需要的效果默认是有如下的四个属性：

[javascript] view plain copy print?
{
debug: false,//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true,//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
}

动态分页

在需要分页的地方加入

 

 

去掉页眉页脚