Community Learn Tools Library Leisure
search
English
Home > List of blog posts > lodop控件打印小票
Blogger Information
Blog 55
fans 0
comment 0
visits 58841
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
lodop控件打印小票
南鸢离梦的博客
Original
2688 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post