基於Metronic的Bootstrap開發框架--資產編碼列印處理

在開發業務管理系統的時候，往往涉及到資產信息及編碼的列印處理，如我們需要對資產信息、條形碼、二維碼一起列印，以便貼在具體資產信息上面，方便微信公眾號、企業微信進行業務處理，那麼編碼的列印就很有必要了，本篇隨筆介紹實際生產環境中的資產編碼列印處理。

列印操作，可以使用多種方式處理，如使用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'>&nbsp;</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'>&nbsp;</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'>&nbsp;</p>");//分頁列印
    }
}