在開發(fā)業(yè)務(wù)管理系統(tǒng)的時候，往往涉及到資產(chǎn)信息及編碼的打印處理谈况，如我們需要對資產(chǎn)信息勺美、條形碼、二維碼一起打印碑韵，以便貼在具體資產(chǎn)信息上面赡茸，方便微信公眾號、企業(yè)微信進行業(yè)務(wù)處理祝闻，那么編碼的打印就很有必要了占卧，本篇隨筆介紹實際生產(chǎn)環(huán)境中的資產(chǎn)編碼打印處理。
打印操作联喘，可以使用多種方式處理华蜒，如使用PrintThis的JS庫打印，或者使用用戶界面比較好的LODOP插件來進行打印操作豁遭，本篇隨筆介紹基于LODOP插件來對資產(chǎn)編碼信息的打印操作叭喜；另外打印給的時候，如果不恰當(dāng)?shù)脑O(shè)置蓖谢，估計打印信息部分打印捂蕴，那這種情況也是需要避免的，需要人為的增加分頁的處理蜈抓，以便整個編碼信息打印正確出來启绰。
1、單個編碼信息的打印
打個記錄我們可以在表格的后面按鈕增加一個處理操作沟使，如下界面所示委可。
image
然后觸發(fā)一個彈出層進行展示即可，如果用戶需要打印腊嗡，則在右下角進行打印着倾。
image
打印界面如下所示。
image
以上就是幾個操作的界面效果燕少，實際處理代碼是如何的呢卡者，我們?nèi)绾握{(diào)用LODOP進行頁面打印的呢?
定義一個彈出層用來展示資產(chǎn)編碼信息，如下所示客们。
<!--------------------------顯示二維碼的彈出層---------------------------->
<div id="qrcode" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">
<i class="icon-book-open"></i>
<span style="font-weight:bold">查看二維碼信息</span>
</h4>
</div>
<div class="modal-body" id="showCodeDiv">
<table border='0' style="width:180px" id="qrcodePrint">
<tr>
<td>
<table border='0' style="width:180px;page-break-after:always">
<tr>
<td>
<div style="padding-left:5px">資產(chǎn)名稱：<label id="lblName"></label></div>
<div style="padding-left:5px">管理部門：<label id="lblChargeDept"></label></div>
<div style="padding-left:5px">使用部門：<label id="lblCurrDept"></label></div>
<div style="padding-left:5px">使用人：<label id="lblUsePerson"></label></div>
<div style="padding-left:5px">存放地點：<label id="lblKeepAddr"></label></div>
<img alt="" id="img_barcode" />
</td>
<td>
<div id="img_qrcode" style="padding:5px"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer bg-info">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="PrintQrcode()">打印文檔</button>
<button type="button" class="btn default" data-dismiss="modal">關(guān)閉</button>
</div>
</div>
</div>
</div>
這里的二維碼我使用了qrcodejs插件崇决，條形碼使用JsBarcode插件
引入相關(guān)的JS文件就可以使用了
<script src="~/Content/JQueryTools/qrcodejs/qrcode.min.js"></script>
<script src="~/Content/JQueryTools/JsBarcode/dist/JsBarcode.all.min.js"></script>
通過Ajax在后端獲取對象數(shù)據(jù)材诽，然后綁定信息界面上來，如果是二維碼恒傻，條形碼脸侥，則根據(jù)對應(yīng)的接口JS代碼進行處理。
//顯示二維碼
function ShowCodeByIds(ID) {
if (ID == "") {
showTips("請選擇一條記錄");
return;
}
//發(fā)送請求
$.getJSON("/Asset/FindByID?r=" + Math.random() + "&id=" + ID, function (info) {
$("#lblCode").text(info.Code);
$("#lblName").text(info.Name);
$("#lblCurrDept").text(info.CurrDept);
$("#lblChargeDept").text(info.ChargeDept);
$("#lblUsePerson").text(info.UsePerson);
$("#lblKeepAddr").text(info.KeepAddr);
var code = info.Code;
$("#img_qrcode").empty();
var qrcode = new QRCode(document.getElementById("img_qrcode"), {
text: code,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
JsBarcode("#img_barcode", code, {
format: "CODE128",
displayValue: true,
fontSize: 20,
lineColor: "#0cc",
height: 20,
width: 1.5
});
});
$("#qrcode").modal("show");
}
打印的代碼很簡單盈厘，主要就是構(gòu)建HTML打印數(shù)據(jù)后睁枕，調(diào)用對象打印即可，代碼如下所示沸手。
//打印數(shù)據(jù)構(gòu)建
var LODOP; //聲明為全局變量
function CreatePrintData(html) {
LODOP = getLodop();
LODOP.PRINT_INIT("");
var strBodyStyle = "<style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFFE;border: 1; }";
strBodyStyle += " th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
var strFormHtml = strBodyStyle + "<body>" + html + "</body>";
LODOP.ADD_PRINT_HTM(10, 10, 710, "100%", strFormHtml);
LODOP.PREVIEW();
}
//資產(chǎn)編碼的打印
function PrintQrcode() {
CreatePrintData($("#qrcodePrint").html());
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
}
2外遇、批量記錄打印
單個記錄打印沒問題，有時候契吉，需要多個記錄一起打印跳仿，這樣可以提高效率。
原本想不提供界面栅隐，直接生成HTML進行輸出打印塔嬉，不過這個方式處理的話玩徊，條形碼工作正常但二維碼倒是沒有出來租悄，只好在界面展示后，在通過按鈕進行打印恩袱，這樣就可以解決這個問題泣棋。
先編寫一個批量打印的彈出層，用在承載界面內(nèi)容畔塔。
<!--------------------------顯示批量打印記錄的彈出層---------------------------->
<div id="codeDiv" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">
<i class="icon-book-open"></i>
<span style="font-weight:bold">查看二維碼信息</span>
</h4>
</div>
<div class="modal-body">
<div class="row" id="hiddenDiv">
</div>
</div>
<div class="modal-footer bg-info">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AssetPrintOK()">打印文檔</button>
<button type="button" class="btn default" data-dismiss="modal">關(guān)閉</button>
</div>
</div>
</div>
</div>
增加一個按鈕的處理入口代碼潭辈。
<button type="button" onclick="AssetPrint()" class="btn btn-circle btn-sm red">
<i class="fa fa-plus"></i>
資產(chǎn)編碼打印
</button>
然后編寫一個函數(shù)，用來選定記錄澈吨，并動態(tài)賦值HTML代碼
function AssetPrint() {
var rows = $table.bootstrapTable('getSelections');
if (rows.length == 0) {
showTips("請選擇你要打印編碼的記錄");
return;
}
var div = $("#hiddenDiv");
div.empty();
div.append("<div class='row'>");
for (var i = 0; i < rows.length; i++) {
AppendCodeItem(rows[i].Code, rows[i].Name, rows[i].CurrDept, rows[i].ChargeDept, rows[i].UsePerson, rows[i].KeepAddr);
if (i > 0 && i % 3 == 0) {
div.append("<p style='page-break-after:always'> </p>");//分頁打印
}
}
div.append("</div>");
$("#codeDiv").modal("show");
}
其中主要的邏輯封裝在AppendCodeItem函數(shù)里面把敢，這個函數(shù)就是批量根據(jù)數(shù)據(jù)進行處理的。
//動態(tài)追加HTML內(nèi)容在對應(yīng)的層上谅辣，并初始化條形碼和二維碼的值
function AppendCodeItem(Code, Name, CurrDept, ChargeDept, UsePerson, KeepAddr) {
var div = $("#hiddenDiv");
div.append("<div class='col-md-6'>");
div.append("<div class='form-group' style='padding-left:5px'>");
div.append("<label class='col-md-12'>資產(chǎn)名稱：" + Name + "</label><br/>");
div.append("<label class='col-md-12'>管理部門：" + CurrDept + "</label><br/>");
div.append("<label class='col-md-12'>使用部門：" + ChargeDept + "</label><br/>");
div.append("<label class='col-md-12'>使用人：" + UsePerson + "</label><br/>");
div.append("<label class='col-md-12'>存放地點：" + KeepAddr + "</label><br/>");
div.append("</div>");//form-group
div.append("</div>");//md-6
//加入一個dom修赞，然后綁定二維碼
div.append("<div class='col-md-6' style='padding-left;' id='qr_" + Code + "'></div>");
//加入一個dom,然后綁定條形碼
div.append("<div class='col-md-12'>")
div.append("<img id='bar" + Code + "'/>");
div.append("</div>");
div.append("<hr/>");
var barname = "#bar" + Code;
JsBarcode(barname, Code, {
format: "CODE128",
displayValue: true,
fontSize: 20,
lineColor: "#0cc",
height: 20,
width: 1.5
});
var qrname = "qr_" + Code;
//Jquery.qrcode代碼
//$("#" + qrname).qrcode({ width: 64, height: 64, text: Code });
//QRCodejs的語法
$("#" + qrname).empty();
var qrcode = new QRCode(document.getElementById(qrname), {
text: Code,
width: 80,
height: 80,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
批量彈出層界面如下所示。
image
打印效果如下所示
image
這里本來想和單個界面設(shè)計一樣的桑阶，不過布局好像不知道是受到什么原因的影響柏副，多個記錄的排布總是不理想，因此只好把條形碼蚣录、二維碼挨著放置了割择。
3、打印的分頁處理
上面的代碼我們做了打印的分頁處理萎河，如果不這樣處理荔泳，則會導(dǎo)致一個標簽信息可能不完整蕉饼，如下效果所示。
image
這樣如果要裁剪標簽的話玛歌，這個就會作廢了椎椰，需要重新打印，但是我們可以通過分頁打印進行處理這個問題沾鳄。
分頁打印不復(fù)雜慨飘，只需要在對應(yīng)的地方增加一個標記，標注為打印分頁部分即可译荞，如下所示瓤的。
<p style='page-break-after:always'> </p>
那么我們在實際測試，大概幾個標簽就會排滿的時候吞歼，增加這個分頁的標記就可以了圈膏，如下所示。
for (var i = 0; i < rows.length; i++) {
AppendCodeItem(rows[i].Code, rows[i].Name, rows[i].CurrDept, rows[i].ChargeDept, rows[i].UsePerson, rows[i].KeepAddr);
if (i > 0 && i % 3 == 0) {
div.append("<p style='page-break-after:always'> </p>");//分頁打印
}
}
image
