在開發業務管理系統的時候，往往涉及到資產信息及編碼的打印處理，如我們需要對資產信息、條形碼、二維碼一起打印，以便貼在具體資產信息上面，方便微信公眾號、企業微信進行業務處理，那么編碼的打印就很有必要了，本篇隨筆介紹實際生產環境中的資產編碼打印處理。
打印操作，可以使用多種方式處理，如使用PrintThis的JS庫打印，或者使用用戶界面比較好的LODOP插件來進行打印操作，本篇隨筆介紹基於LODOP插件來對資產編碼信息的打印操作；另外打印給的時候，如果不恰當的設置，估計打印信息部分打印，那這種情況也是需要避免的，需要人為的增加分頁的處理，以便整個編碼信息打印正確出來。
1、單個編碼信息的打印
打個記錄我們可以在表格的后面按鈕增加一個處理操作，如下界面所示。
然后觸發一個彈出層進行展示即可，如果用戶需要打印，則在右下角進行打印。
打印界面如下所示。
以上就是幾個操作的界面效果，實際處理代碼是如何的呢，我們如何調用LODOP進行頁面打印的呢?
定義一個彈出層用來展示資產編碼信息，如下所示。
<!--------------------------顯示二維碼的彈出層----------------------------> <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">資產名稱：<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">關閉</button> </div> </div> </div> </div>
這里的二維碼我使用了qrcodejs插件，條形碼使用JsBarcode插件
引入相關的JS文件就可以使用了
<script src="~/Content/JQueryTools/qrcodejs/qrcode.min.js"></script> <script src="~/Content/JQueryTools/JsBarcode/dist/JsBarcode.all.min.js"></script>
通過Ajax在后端獲取對象數據，然后綁定信息界面上來，如果是二維碼，條形碼，則根據對應的接口JS代碼進行處理。
//顯示二維碼 function ShowCodeByIds(ID) { if (ID == "") { showTips("請選擇一條記錄"); return; } //發送請求 $.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"); }
打印的代碼很簡單，主要就是構建HTML打印數據后，調用對象打印即可，代碼如下所示。
//打印數據構建 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(); } //資產編碼的打印 function PrintQrcode() { CreatePrintData($("#qrcodePrint").html()); LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1); LODOP.PREVIEW(); }
2、批量記錄打印
單個記錄打印沒問題，有時候，需要多個記錄一起打印，這樣可以提高效率。
原本想不提供界面，直接生成HTML進行輸出打印，不過這個方式處理的話，條形碼工作正常但二維碼倒是沒有出來，只好在界面展示后，在通過按鈕進行打印，這樣就可以解決這個問題。
先編寫一個批量打印的彈出層，用在承載界面內容。
<!--------------------------顯示批量打印記錄的彈出層----------------------------> <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">關閉</button> </div> </div> </div> </div>
增加一個按鈕的處理入口代碼。
<button type="button" onclick="AssetPrint()" class="btn btn-circle btn-sm red"> <i class="fa fa-plus"></i> 資產編碼打印 </button>
然后編寫一個函數，用來選定記錄，並動態賦值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函數里面，這個函數就是批量根據數據進行處理的。
//動態追加HTML內容在對應的層上，並初始化條形碼和二維碼的值 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'>資產名稱：" + 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 }); }
批量彈出層界面如下所示。
打印效果如下所示
這里本來想和單個界面設計一樣的，不過布局好像不知道是受到什么原因的影響，多個記錄的排布總是不理想，因此只好把條形碼、二維碼挨着放置了。
3、打印的分頁處理
上面的代碼我們做了打印的分頁處理，如果不這樣處理，則會導致一個標簽信息可能不完整，如下效果所示。
這樣如果要裁剪標簽的話，這個就會作廢了，需要重新打印，但是我們可以通過分頁打印進行處理這個問題。
分頁打印不復雜，只需要在對應的地方增加一個標記，標注為打印分頁部分即可，如下所示。
<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>");//分頁打印 } }
