| <!DOCTYPE html> | 
| <html> | 
|     <head> | 
|         <meta charset="utf-8"> | 
|         <title>Demo页</title> | 
|         <meta name="renderer" content="webkit"> | 
|         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> | 
|         <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> | 
|         <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all"> | 
|         <style media="print"> | 
|             @page{ | 
|                 size: auto; | 
|                 margin: 0 0 0 10px; | 
|             } | 
|         </style> | 
|     </head> | 
|     <body> | 
|         <div class="layui-fluid"> | 
|             <div class="layui-card" style="padding: 10px;"> | 
|                 <div  style="padding-top: 10px;"> | 
|                     <img id="imgQr" /> | 
|                 </div> | 
|                 <div id="divPrint" style="margin-top: 10px;"> | 
|                  | 
|                     <table style="width: 650px;margin: 0;padding: 10px; font-weight: 600;"> | 
|                         <tr style="line-height: 50px;"> | 
|                             <td style="width: 80px;">物料编码:</td> | 
|                             <td>XXXXXXXXXXXXXXXXXX</td> | 
|                             <td style="width: 80px;">批次号:</td> | 
|                             <td>XXXXXXXXXXXXXXXXXX</td> | 
|                         </tr> | 
|                         <tr style="line-height: 50px;"> | 
|                             <td>物料名称:</td> | 
|                             <td colspan="3">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> | 
|                         </tr> | 
|                         <tr style="line-height: 50px;"> | 
|                             <td>厂       家:</td> | 
|                             <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td> | 
|                         </tr> | 
|                         <tr style="line-height: 50px;"> | 
|                             <td>生产日期:</td> | 
|                             <td>2021-12-12</td> | 
|                             <td>到期日期:</td> | 
|                             <td>2022-12-11</td> | 
|                         </tr> | 
|                         <tr style=""> | 
|                             <td colspan="4" style="text-align: center;padding-top: 15px;"> | 
|                                 <img id="imgBar" /> | 
|                             </td> | 
|                         </tr> | 
|                     </table> | 
|                 <div style="page-break-after: always;"></div> | 
|                  | 
|                 </div> | 
|                  | 
|                 <div> | 
|                     <button id="btnPrint" type="button">打印</button> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <script src="../../layuiadmin/layui/layui.js"></script> | 
|         <script src="../../js/public.js"></script> | 
|         <script src="../../js/jquery-3.5.1.min.js"></script> | 
|         <script src="../../js/jquery.print.js"></script> | 
|         <script> | 
|             layui.config({ | 
|                 base: '../../layuiadmin/' //静态资源所在路径 | 
|             }).extend({ | 
|                 index: 'lib/index' //主入口模块 | 
|             }).use(['index', 'table', 'laypage', 'layer'], function() { | 
|                 var table = layui.table, | 
|                     form = layui.form, | 
|                     laypage = layui.laypage, | 
|                     layer = layui.layer; | 
|                 // | 
|                 renderImg(); | 
|                 $('#btnPrint').on('click', function() { | 
|                     $("#divPrint").print(); | 
|                 }); | 
|                 // | 
|                 function renderImg(){ | 
|                     sendData(IP + "/Demo/GetBarImg", {}, 'post', function(res) { | 
|                         console.log(res); | 
|                         if (res.code == 1) { //成功 | 
|                             $("#imgBar").attr("src", res.data); | 
|                         } else { //不成功 | 
|                             layer.msg('获取图片失败!', { | 
|                                 icon: 2, | 
|                                 time: 2000 //2秒关闭(如果不配置,默认是3秒) | 
|                             }, function() {}); | 
|                         } | 
|                     }); | 
|                     sendData(IP + "/Demo/GetQrImg", {}, 'post', function(res) { | 
|                         console.log(res); | 
|                         if (res.code == 1) { //成功 | 
|                             $("#imgQr").attr("src", res.data); | 
|                         } else { //不成功 | 
|                             layer.msg('获取图片失败!', { | 
|                                 icon: 2, | 
|                                 time: 2000 //2秒关闭(如果不配置,默认是3秒) | 
|                             }, function() {}); | 
|                         } | 
|                     }); | 
|                 }     | 
|             }); | 
|         </script> | 
|     </body> | 
| </html> |