mvc条码打印（使用window.print打印条码）实例

痛定思痛。 2022-12-18 15:49 138阅读 0赞

## 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('"', "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>

**改一下数据源就直接可以使用（或者赋静态值）**

**效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTkyNTcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/47d5595ac6c94afa8a044aa2c586ff68.png