search

博客列表 >lodop控件打印小票

lodop控件打印小票

南鸢离梦的博客
南鸢离梦的博客原创
2019年11月12日 15:58:242686浏览
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <meta charset="UTF-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
  11.     <title>小票打印</title>
  13.     <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  15.     <script src="/static/js/LodopFuncs.js"></script> // 引入看控件JS
  17.     <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
  19.         <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop32.exe"></embed>
  21.     </object>
  23.     <style type="text/css">
  27.         .left{
  29.             float: left;
  31.         }
  33.         .right{
  35.             float:right;
  37.         }
  39.         .clearfix{
  41.             clear: both;
  43.         }
  45.         ul{list-style: none;}
  47.         .print_container{
  49.             width: 200px;
  51.         }
  53.         .section1{
  55.         }
  57.         .section2 label{
  59.             display: block;
  61.         }
  63.         .section3 label{
  65.             display: block;
  67.         }
  69.         .section4{
  71.         }
  73.         .section4 .total label{
  75.             display: block;
  77.         }
  79.         .section4 .other_fee{
  81.             border-bottom: 1px solid #DADADA;
  83.         }
  85.         .section5 label{
  87.             display: block;
  89.         }
  91.     </style>
  93. </head>
  95. <body style="background-color:#fff;" >
  97. <div class="print_container" id="form1" >
  99.     <h3>{$title}</h3>
  101.     <span>********************************</span>
  103.     <div class="section2">
  105.         <label>订单备注：{$orders.remark}</label>
  107.     </div>
  109.     <span>********************************</span>
  111.     <div class="section3">
  113.         <label>订单编号：{$orders.order_number}</label>
  115.         <br>
  117.         <label>订单时间：{$orders.time}</label>
  119.     </div>
  121.     <span>********************************</span>
  123.     <div class="section4">
  125.         <div style="border-bottom: 1px solid #DADADA;">
  129.             <table style="width: 100%;">
  131.                 <thead>
  133.                 <tr>
  135.                     <td width="60%">商品名称</td>
  137.                     <td width="20%">数量</td>
  139.                     <td width="20%">金额</td>
  141.                 </tr>
  143.                 </thead>
  145.                 <tbody>
  147.                 {volist name="goods" id="v"}
  149.                 <tr>
  151.                     <td>{$v.name}</td>
  153.                     <td>{$v.num}</td>
  155.                     <td>{$v.price * $v.num}</td>
  157.                 </tr>
  159.                 {/volist}
  161.                 </tbody>
  163.             </table>
  165.         </div>
  169.         <div class="total">
  171.             <label class="left">总计</label>
  173.             <label class="right">￥{$orders.total_price}</label>
  175.             <div class="clearfix"></div>
  177.         </div>
  179.         <div style="text-align: right;">
  181.             <label id="f"></label>
  183.         </div>
  185.         <span>********************************</span>
  187.     </div>
  189.     <div class="section5">
  191.         <label>姓名：{$user.name}</label>
  193.         <br>
  195.         <label>电话：{$user.phone}</label>
  197.     </div>
  199.     <span>********************************</span>
  201. </div>
  203. <div>
  205.     <lable>是否出***</lable>
  207.     <input type="radio" name="f" value="1" checked>是 &nbsp;
  209.     <input type="radio" name="f" value="2">否 <br>
  211.     <button id="btn" style="border-radius: 3%;width: 56px;padding: 3px;" onclick="prn1_preview()">打印</button>
  213. </div>
  215. <script type="text/javascript" language="javascript">
  217.     var LODOP; //声明为全局变量
  219.     function prn1_preview() {
  221.         var fp =  $("input[name='f']:checked").val();
  223.         if (fp ==1){
  225.             $("#f").html("已出***&nbsp;&nbsp;&nbsp;")
  227.         }else{
  229.             $("#f").html("未出***&nbsp;&nbsp;&nbsp;")
  231.         }
  233.         CreateOneFormPage();
  235.         LODOP.PREVIEW(); // 打印预览
  237.         // LODOP.PRINT(); // 直接打印
  239.     };
  241.     function CreateOneFormPage(){
  243.         LODOP=getLodop();
  245.         LODOP.PRINT_INIT(); // 打印初始化
  247.         LODOP.SET_PRINT_STYLE("FontSize",15); // 设置打印字体
  249.         LODOP.SET_PRINT_STYLE("Bold",1);      // 设置加粗
  251.         LODOP.SET_PRINT_PAGESIZE(3,800,45,"");  // 设置纸张大小
  253.         LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT",'90%'); // 设置打印缩放
  255.         LODOP.ADD_PRINT_HTM(10,20,'100%','100%',document.getElementById("form1").innerHTML); // 设置打印内容
  257.     };
  261. </script>
  263. </body>
  265. </html>
上一条：php 终于等到你了下一条：jq 生成二维码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多