jquery jqprint 打印

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

铁憨憨b

14955人浏览 · 2019-09-18 11:00:57

铁憨憨b · 2019-09-18 11:00:57 发布

介绍：

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

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

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

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

图例

html

/*在html需要有一块区域用来放打印内容的*/
<style media="print">
    @page {
      size: auto;  /* auto is the initial value */
      margin-top: 0mm; /* this affects the margin in the printer settings */
      margin-bottom: 0mm; /* this affects the margin in the printer settings */
    }
</style>
<div id="print" style="">
	<div id="printContet" media='print' style='font-family:\\5B8B\\4F53;' class="pdf-wrapper">
	</div>
</div>

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 =""+
			"<div id='printTable' media='print' style='font-family:\\5B8B\\4F53;     margin-top: 22px;    padding: 5px;'>" + 
			"		<div style='width:100%;margin:0 auto;text-align: center;'>" + 
			"<h1>"+$("#distDeptCode").next().find("input").val()+"物流中心     <span style='float:right;margin-right:15px;font-size: 20px;'>本单视同<span> </h1>"+
			"<h1 style='    padding: 12px 0px 34px 0;'>干线运输单（商品明细）<span style='float:right;margin-right:15px;font-size: 20px;'>准运证<span></h1>"+
			/*"		    <div style='float:right;    font-size: 14px;font-weight: 800;'>1/1</div>" + */
			"		</div>" + 
			"		<table  border='1' style='width:100%;' id='printtable2'>" + 
			"		    <tr style='height:50px;'>" + 
			"		      <td colspan='8'>" + 
			"		      <div style='padding:20px;'>" + 
			"			      	<div class='layui-row'>" + 
			"			      		<div class='layui-col-xs4'>干线运输单号：<span id=''>"+isNullOrUndef(mainData.TRAN_DELIVER_BILL_ID)+"</span></div>" + 
			"			      		<div class='layui-col-xs4'> 目的站点：	   <span id=''>"+isNullOrUndef(topData.DELIVER_DATE)+"</span></div>" + 
			"			      		<div class='layui-col-xs4'> 送货日期：<span id=''>"+isNullOrUndef(topData.DIST_STATION_NAME)+"</span></div>" + 
			"			      	</div>" + 
			"			      	<div class='layui-row'>" + 
			"			      		<div class='layui-col-xs3'>封签号：<span id='vehicleTrademark'>"+isNullOrUndef(topData.SEAL_OFF_NO)+"</span></div>" + 
			"			      		<div class='layui-col-xs3'>车辆牌号：<span id='vehicleOrderNo'>"+isNullOrUndef(topData.VEHICLE_TRADEMARK)+"</span></div>" + 
			"			      		<div class='layui-col-xs3'>车辆型号：<span id='vehicleModelName'>"+isNullOrUndef(topData.VEHICLE_MODEL_NAME)+"</span></div>" + 
			"			      		<div class='layui-col-xs3'>驾驶员：<span id='deliverName'>"+isNullOrUndef(topData.DELIVER_NAME)+"</span></div>" + 
			"			      	</div>" + 
			"		      </div>" + 
			"		      </td>" + 
			"		    </tr>" + 
			"		    <tr height='30px;'>" + 
			"		        <td style='text-align:center;'>货主</td>" + 
			"		        <td style='text-align:center;'>业务类型</td>" + 
			"		        <td style='text-align:center;'>商品代码</td>" + 
			"		        <td style='text-align:center;'>商品名称</td>" + 
			"		        <td style='text-align:center;'>订单数</td>" + 
			"		        <td style='text-align:center;'>单位</td>" + 
			"		        <td style='text-align:center;'>单价</td>" + 
			"				<td style='text-align:center;'>数量</td>" + 
			"		    </tr>";
		for(i in bodyData){
			dataContet+= "<tr height='30px;'>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].SUPPLY_NAME)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].OPER_TYPE_NAME)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].BRAND_ID)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].BRAND_NAME)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].QTY_ORDER_COUNT)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].UNIT_NAME)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].TRADE_PRICE)+"</td>"+
					        "<td style='text-align:center;'>"+isNullOrUndef(bodyData[i].QTY_ORDER)+"</td>"+
					    "</tr>";
		}	
		dataContet+="		</table>" + 
		"  <div class='layui-row'>" +
		"	    <div class='layui-col-xs2'>" +
		"	      	<span>总运输计划数： </span><span id='qtyTranPlanBillCount'>"+isNullOrUndef(topData.QTY_TRAN_PLAN_BILL_COUNT)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs2'>" +
		"	      	<span>总送货单数： </span><span id='qtyOrderCount'>"+isNullOrUndef(topData.QTY_DELIVER_COUNT)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs3'>" +
		"	      	<span>总卷烟数量（件）： </span><span id='qtyBrandCount'>"+isNullOrUndef(topData.QTY_ORDER_SUM_JY)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs2'>" +
		"	      	<span>总非烟数量： </span><span id='qtyDrawSum'>"+isNullOrUndef(topData.QTY_ORDER_SUM_FY)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs3'>" +
		"	      	<span>总广宣品数量： </span><span id='amtDrawSum'>"+isNullOrUndef(topData.QTY_ORDER_SUM_GXP)+"</span>" +
		"	    </div>" +
		" 	</div>" +
		"  <div class='layui-row'>" +
		"	    <div class='layui-col-xs6'>" +
		"	      	<span>出发确认日期： </span><span id='qtyTranPlanBillCount'>"+isNullOrUndef(topData.START_DATE)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs6'>" +
		"	      	<span>出发确认人员： </span><span id='qtyOrderCount'>"+isNullOrUndef(topData.START_PERSON_NAME)+"</span>" +
		"	    </div>" +
		" 	</div>" +
		"  <div class='layui-row'>" +
		"	    <div class='layui-col-xs6'>" +
		"	      	<span>到达确认日期： </span><span id='qtyTranPlanBillCount'>"+isNullOrUndef(topData.ARRIVE_DATE)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs6'>" +
		"	      	<span>到达确认人员： </span><span id='qtyOrderCount'>"+isNullOrUndef(topData.ARRIVE_PERSON_NAME)+"</span>" +
		"	    </div>" +
		" 	</div>" +
		"  	<div class='layui-row' style='padding-top: 23px;'>" +
		"	    <div class='layui-col-xs4'>" +
		"	      	<span>运输时长（小时）：  </span><span id='operPersonName'>"+isNullOrUndef(topData.TRAN_DELIVER_TIME)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs4'>" +
		"	      	<span>操作人： </span><span id='operPersonName'>"+isNullOrUndef(topData.OPER_PERSON_NAME)+"</span>" +
		"	    </div>" +
		"	    <div class='layui-col-xs4'>" +
		"	      	<span>打印日期： </span><span id='printDate'>"+getTime()+"</span>" +
		"	    </div>" +
		"  	</div>" +
		"  <div style='page-break-after:always;'></div> ";
		
		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: '<!doctype html>'
		});
		$('#'+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?
<link href="printShou.css" rel="stylesheet"type="text/css" media="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
}

动态分页

在需要分页的地方加入

去掉页眉页脚