jquery jqprint 打印

最新推荐文章于 2024-08-10 07:23:13 发布
最新推荐文章于 2024-08-10 07:23:13 发布
阅读量1.4w 收藏 13
点赞数 2
分类专栏： h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38730338/article/details/100975850
版权

介绍：

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
}

动态分页

在需要分页的地方加入

 <div style='page-break-after:always;'></div> 

去掉页眉页脚

<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>

铁憨憨b
关注
专栏目录
jQuery打印插件jqprint，内包含使用示例
04-24
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jqu
jqprint插件使用教程与源码实现分析
前端-后端学习之路
10-10 8471
jqprint 是可以实现局部打印的一个轻量型的，并且基于jquery的js插件。 博客从jqprint的使用教程和源码解析两个方面介绍这个小插件。1.jqprint使用教程全解1.1 jqrint基本使用教程 1.2 jqprint打印的div中有input或者textarea等 1.3 jqprint如何引入外部css 2.源码分析
printThis jQuery 打印插件使用教程
最新发布
gitblog_00945的博客
08-10 472
printThis jQuery 打印插件使用教程 项目地址:https://gitcode.com/gh_mirrors/pr/printThis 项目介绍 printThis 是一个基于 jQuery 的打印插件，允许用户打印特定的 DOM 元素，同时保持页面的 CSS 样式。该插件支持打印多个 DOM 元素、保留表单输入、支持 Canvas 等特性。printThis 是一个开源项目，托管在...
【jqprint打印】js两种超简单的打印方法
热门推荐
baidu_41599099的博客
04-13 2万+
1.用jqprint插件实现打印 快速使用 jqprint是一个简单好用的打印插件，可以实现局部打印，首先是引入jq,,然后引入jqprnt //打印 $("#fh").jqprint({ debug: false, importCSS: true, ...
jQuery.print实现jqprint打印程序
02-13
jQuery.print实现jqprint打印程序：HTML5+CSS3+JavaScript+Jquery实现浏览器打印程序。
Jquery Jqprint—借助Jquery Jqprint实现网页打印功能
gaohuanjie的专栏
07-09 1万+
Jquery Jqprint—借助Jquery Jqprint实现网页打印功能
jQuery jqPrint 插件
gitblog_00007的博客
03-10 719
jQuery jqPrint 插件 jQuery jqPrint插件 是一个轻量级的 JavaScript 库，用于将网页或特定 DOM 元素以打印友好的方式呈现。 项目简介 jQuery jqPrint 插件允许开发者快速地为网站添加打印功能，而无需编写复杂的 CSS 样式或处理浏览器之间的兼容性问题。该插件适用于希望提供便捷、自定义打印体验的 Web 开发者。 功能与用途 快速实现打印功能：...
【jquery】jqprint插件实现打印功能：
SunPeng的博客
11-02 797
【jquery】jqprint插件实现打印功能：
JQuery-jqprint实现打印功能
汪杰杰杰杰
08-19 8353
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、jqprint插件的优势？二、所需插件三、引入JS文件四、给前端添加一个打印按钮五、JS实现打印功能代码六、最终效果 前言 WEB开发中有的时候需要直接调用打印功能，目前虽然可以通过内置的函数实现打印，可兼容性却不是很好，这时候jqprint插件的优势就显现出来了。 提示：以下是本篇文章正文内容，下面案例可供参考 一、jqprint插件的优势？ jqprint 具有以下优势： 兼容性好，支持IE6及以上版本、谷歌浏览器
query打印 jquery.jqprint-0.3.js是其实jqprint使用起来十分的简单，只需要讲两个重要的js文件引入
11-18
jquery打印 jquery.jqprint-0.3.js是jquery的一个打印插件，是jPrintArea的加强版（官网是这么说的，具体可以看下面引自官网的一段话），可以打印选定的区域，没有页眉和页脚，还是非常好用滴！要能运行这个打印插件...
jquery.jqprint打印插件
06-29
《jQuery.jqPrint打印插件详解与应用》 在网页开发中，打印功能是一个不可或缺的部分，用户可能需要将页面内容以纸质形式保存或分享。jQuery.jqPrint是一款轻量级的打印插件，专为简化网页元素的打印操作而设计。它...
jQuery打印插件----jQuery.print.js
11-14
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
js打印功能jquery.jqprint-0.3.js
03-12
具体使用和讲解可以查看https://blog.csdn.net/weixin_37591584/article/details/88412770
jquery.jqprint.js
08-29
latest jquery print plugin
jQuery.print实现打印（导出）Html页面
11-16
简单的才是最实用的，使用简单的Jquery插件实现头痛的导出页面表格
jquery.print.zip
03-25
jquery打印插件 jQuery.print.js jquery.PrintArea.js $("#print_div").print(); $("#print_div").printArea(); 局部打印需要把样式写在print_div里
jquery.jqprint-0.3.js
09-27
《jQuery.jqprint-0.3.js：JS打印插件详解及应用》 在Web开发中，有时我们需要为用户提供打印功能，以便他们可以将网页内容输出到纸上保存或分享。JavaScript（JS）作为浏览器端的主要脚本语言，提供了实现这一功能...
jQuery.print
gitblog_00040的博客
03-17 536
jQuery.print 项目地址: https://gitcode.com/DoersGuild/jQuery.print?utm_source=artical_gitcode jQuery.print是一个轻量级的jQuery插件，用于简化网页中的打印功能。它允许您选择要打印的内容，并提供了一组灵活的选项来自定义打印设置。 项目简介 jQuery.print是一个简单易用的插件，可以帮助开发者...
jQueryPrint打印
jance_zyx的博客
05-16 2834
jQuery简单易用的网页内容打印插件jQuery.print，由于是初级研究这个插件的使用，当时也碰到许多小问题，今天就跟大家分享一下，希望可以帮助大家解决困扰。如果尝试以后，遇见问题可以评论，如果我看到了，我会积极帮助大家解决的。 一.首先下载一个jQueryPrint http://www.jq22.com/jquery-info12837（给大家提供一个下载的网址，不过这个网址好像是需要花...
jqprint打印设置
05-26
jqprint是一个jQuery插件，可以在浏览器中打印指定的HTML元素。要设置打印样式，可以使用CSS样式表。以下是一个示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Print Example</title> <style> /* 打印样式 */ @media print { body { font-size: 12pt; } h1 { font-size: 16pt; } p { font-size: 10pt; } } </style> </head> <body> <h1>Print Example</h1> <p>This is an example of how to use jqprint.</p> <div id="print-me"> <p>This is the content that will be printed.</p> </div> <button id="print-btn">Print</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.min.js"></script> <script> $(document).ready(function() { $('#print-btn').click(function() { $('#print-me').print(); }); }); </script> </body> </html> ``` 在上面的示例中，我们定义了一个CSS样式表，用于设置打印时的样式。然后，我们使用jqprint插件将id为“print-me”的div元素打印出来。最后，我们使用jQuery绑定了一个点击事件，当用户点击“Print”按钮时，就会触发打印功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值