jquery jqprint 打印

介绍：

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
}

动态分页

在需要分页的地方加入

去掉页眉页脚

jquery jqprint 打印相关推荐

Jquery Jqprint—随着Jquery Jqprint实现网页打印
研究关于利用空闲时间今天Jquery Jqprint插入,用这个Jquery脚本就可以实现轻松打印指定的页面内容功能区: 样品A: <!DOCTYPE html PUBLIC "-// ...
jquery.print 时间_Jquery Jqprint—随着Jquery Jqprint实现网页打印
Jquery Jqprint打印控件演示 html,body{margin:auto 15%;padding:0;} p{line-height: 18px;} function print(){ $ ...
页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
JQuery 插件 JQprint 打印功能
jquery为我们提供了很多的插件,JQprint只是其中一种打印插件,可以很好的打印页面上的东西,包括设置的css 样式废话不多说,直接上代码: <script type="tex ...
处理jquery.jqprint.js不能打印input、textarea区以及样式问题
处理jquery.jqprint.js不能打印input.textarea区以及样式问题对于打印区的input和textarea做一下处理: 处理打印样式问题(打印样式与显示样式不一样) 对于打印区 ...
使用jqprint打印网页指定区域的内容
使用jqprint打印网页指定区域的内容文章目录使用jqprint打印网页指定区域的内容插件使用 demo 最终效果根据工厂的需求,要在浏览器上打印执行一系列操作之后,打印出一个标签,贴在包 ...
lodop jquery.qrcode打印二维码
记录下lodop jquery.qrcode打印二维码:参考价值在me.CreateOneFormPage (): 具体去我的下载里边找demo: 方法具体代码如下: var LODOP; //声明为 ...
Jquery网页打印
今天做项目中,需要用到打印功能,开始的时候用js来调用打印机,之后样式,还有什么的都没有了,之后ie有时候还运行不了,后来就在网上找,之后发现jquery有打印插件,所以就用了,并且发现jquery打 ...
class jqprint 失效_使用jquery.jqprint.js 实现的打印功能，IE9不能进行打印预览、火狐打印空白界面...
提示的内容:SCRIPT438: 对象不支持"ExecWB"属性或方法首先解决IE9不能打印预览的问题: 查找了一大推资料 ,有两种说法:一种是IE的安全性级别太高:一种是需要安 ...

jquery jqprint 打印

jquery jqprint 打印相关推荐

最新文章

热门文章