介紹：
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>