mvc条码打印(使用window.print打印条码)实例

mvc条码打印(使用window.print打印条码)实例

代码:

@{
    
    
    Layout = "~/Views/Shared/_Layout.cshtml";
    var types = ViewData["types"].ToString().Trim();
}

<script src="@Url.Content("~/Areas/Area/AreaScripts/PrinterInWarehouse.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Area/AreaScripts/qrcode.min.js")"></script>
<script src="@Url.Content("~/Areas/Area/AreaScripts/qrcode.js")"></script>

<script>
    $(function () {
    
    
        makeCode();
    });
    //这是二维码
    function makeCode() {
    
    

        var listCode1 = '@ViewData["list"]';
        var jsonString = listCode1.replace(new RegExp('&quot;', "gm"), '"')
        var data = eval('(' + jsonString + ')');

        for (var i = 0; i < data.listData.length; i++) {
    
    
            var ids = null
            var qrcode =null;
            if(@types=="3"){
    
    
                ids = "qrcode'" + data.listData[i].JWBCode + "'";
                qrcode = new QRCode(document.getElementById(ids), {
    
    
                    width: 50,
                    height: 50
                });
                var strCode= data.listData[i].JWBRId + "/" + data.listData[i].JWBCode + "/" + data.listData[i].JWCode;
                qrcode.makeCode(strCode);
            }
        }

    }

    function btndy() {
    
    
        var headstr = "<html><head><title></title></head><body>";
        var footstr = "</body></html>";
        var newstr = $("#daYing").html();                   // 获取要打印的div内容
        var oldstr = document.body.innerHTML;                // 将过去的body内容存到oldstr
        document.body.innerHTML = headstr + newstr + footstr;     // 组合打印内容
        window.print.portrait = false;    //true为纵向打印,flase为横向打印
        window.print.header = "1231";       //页眉
        window.print.footer = "31";       //页脚
        window.print();                                  // 弹出打印窗体
        document.body.innerHTML = oldstr;               // 还原HTML内容
        location.reload(); //重新刷新当前窗口, 很重要. 不刷新会导致除局部之外的全失效了
        window.document.body.innerHTML = oldstr;//重新给页面内容赋值;


    }

</script>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PrinterInWarehouse</title>
</head>

<body style="overflow: auto;">
    <input hidden id="ids" />
    <div id="divTop">
        <div id="tb" style="padding:2px 5px; background: #F4F4F4;">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" onclick="btndy()">打 印</a>
            @*<a href="javascript:history.go(-1)" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返 回</a>*@
        </div>
    </div>
    <div id="dy">
        @if (types == "3")
        {
    
    
            var data = ViewData["part"] as List<XYWMS.EF.ENTITY.VJWhsBinRela_JWarehouse>;
            if (data.Count == 0)
            {
    
    

                <div id="isYing" style="color:red;font-size:35px;">还没有录入数据</div>
            }
            else
            {
    
    
                <div id="daYing">

                    @foreach (var item in data)
                    {
    
    
                        <table style="border:1px inset black;margin-top:10px;margin-bottom:10px;width:auto" height="280">
                            <tr>
                                <td>
                                    <div style="width:275px;border-bottom: inset 1px black;height:30px;">
                                        <div>库位编码:@item.JWBCode</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="width:275px;border-bottom: inset 1px black;height:30px;">
                                        <div>仓库编码:@item.JWCode</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="width:275px;border-bottom: inset 1px black;height:30px;">
                                        <div>仓库名称:@item.JWName</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="width:275px;height:55px;line-height:11px;">
                                        <div id="qrcode'@item.JWBCode'" style="width:55px; height:55px; position:absolute; left:210px;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <div style="height:5px;"></div>
                    }
                </div>
            }
        }
    </div>
</body>

</html>

改一下数据源就直接可以使用(或者赋静态值)

效果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37192571/article/details/109306770