欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Metronic的Bootstrap开发框架--资产编码打印处理

程序员文章站 2022-08-10 11:47:19
在开发业务管理系统的时候,往往涉及到资产信息及编码的打印处理,如我们需要对资产信息、条形码、二维码一起打印,以便贴在具体资产信息上面,方便微信公众号、企业微信进行业务处理,那么编码的打印就很有必要了,本篇随笔介绍实际生产环境中的资产编码打印处理。 ......

在开发业务管理系统的时候,往往涉及到资产信息及编码的打印处理,如我们需要对资产信息、条形码、二维码一起打印,以便贴在具体资产信息上面,方便微信公众号、企业微信进行业务处理,那么编码的打印就很有必要了,本篇随笔介绍实际生产环境中的资产编码打印处理。

打印操作,可以使用多种方式处理,如使用printthis的js库打印,或者使用用户界面比较好的lodop插件来进行打印操作,本篇随笔介绍基于lodop插件来对资产编码信息的打印操作;另外打印给的时候,如果不恰当的设置,估计打印信息部分打印,那这种情况也是需要避免的,需要人为的增加分页的处理,以便整个编码信息打印正确出来。

1、单个编码信息的打印

打个记录我们可以在表格的后面按钮增加一个处理操作,如下界面所示。

基于Metronic的Bootstrap开发框架--资产编码打印处理

然后触发一个弹出层进行展示即可,如果用户需要打印,则在右下角进行打印。

基于Metronic的Bootstrap开发框架--资产编码打印处理

打印界面如下所示。

基于Metronic的Bootstrap开发框架--资产编码打印处理

以上就是几个操作的界面效果,实际处理代码是如何的呢,我们如何调用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
            });
        }

批量弹出层界面如下所示。

基于Metronic的Bootstrap开发框架--资产编码打印处理

打印效果如下所示

基于Metronic的Bootstrap开发框架--资产编码打印处理

 这里本来想和单个界面设计一样的,不过布局好像不知道是受到什么原因的影响,多个记录的排布总是不理想,因此只好把条形码、二维码挨着放置了。

 

 3、打印的分页处理

上面的代码我们做了打印的分页处理,如果不这样处理,则会导致一个标签信息可能不完整,如下效果所示。

基于Metronic的Bootstrap开发框架--资产编码打印处理

 

这样如果要裁剪标签的话,这个就会作废了,需要重新打印,但是我们可以通过分页打印进行处理这个问题。

分页打印不复杂,只需要在对应的地方增加一个标记,标注为打印分页部分即可,如下所示。

<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>");//分页打印
    }
}

基于Metronic的Bootstrap开发框架--资产编码打印处理