首页 发现 帮助
注册 登录
jjhc
/
jucai
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
目录树: 8ba5464fbe
分支列表 标签列表
jucai
/
public
/
themes
/
default
/
assets
/
app
/
js
/
hiprint
/
custom.html

custom.html 31 KB
文件历史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8" />
    5. 

  5.     <title></title>
    6. 

  6.     <link href="css/hiprint.css" rel="stylesheet" />
    7. 

  7.     <link href="css/print-lock.css" rel="stylesheet" />
    8. 

  8. 

  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    10. 

  10.     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    11. 

  11.    
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

  14.     <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
    15. 

  15.        
    16. 

  16. 

  17.         <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
    18. 

  18.             <div class="container-fluid height-100-per print-content">
    19. 

  19.                 <div class="hinnn-callout hinnn-callout-danger small-callout">
    20. 

  20.                     <p>Hiprint 存在3种方式生成打印模板 <a href="~/Demo"><code>托拽自定义</code>-实例1</a>、<a href="~/Demo/Demo2"><code>配置方式</code>-实例2</a>、<a href="~/Demo/Demo3"><code>调用函数方式</code>-实例3</a></p>
    21. 

  21.                 </div>
    22. 

  22. 

  23.                 <div class="row">
    24. 

  24.                     <div class="col-sm-12">
    25. 

  25.                         <div class="row">
    26. 

  26.                             <div class="col-sm-3 col-md-2" style="padding-right:0px;">
    27. 

  27. 

  28.                                 <div class="rect-printElement-types hiprintEpContainer">
    29. 

  29.                                     <ul class="hiprint-printElement-type">
    30. 

  30. 

  31.                                         <li>
    32. 

  32.                                             <span class="title"><code>拖拽列表</code></span>
    33. 

  33.                                             <ul>
    34. 

  34.                                                 <li>
    35. 

  35.                                                     <a class="ep-draggable-item" tid="testModule.text" style="">
    36. 

  36. 

  37.                                                         <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
    38. 

  38.                                                         <span class="glyphicon-class">文本</span>
    39. 

  39.                                                     </a>
    40. 

  40.                                                 </li>
    41. 

  41. 

  42.                                                 <li>
    43. 

  43.                                                     <a class="ep-draggable-item" tid="testModule.image" style="">
    44. 

  44.                                                         <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
    45. 

  45.                                                         <span class="glyphicon-class">图片</span>
    46. 

  46.                                                     </a>
    47. 

  47.                                                 </li>
    48. 

  48.                                                 <li>
    49. 

  49.                                                     <a class="ep-draggable-item" tid="testModule.longText">
    50. 

  50.                                                         <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
    51. 

  51.                                                         <span class="glyphicon-class">长文</span>
    52. 

  52. 

  53. 

  54.                                                     </a>
    55. 

  55.                                                 </li>
    56. 

  56.                                              
    57. 

  57.                                                 <li>
    58. 

  58.                                                     <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
    59. 

  59.                                                         <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
    60. 

  60.                                                         <span class="glyphicon-class">表格</span>
    61. 

  61.                                                     </a>
    62. 

  62.                                                 </li>
    63. 

  63. 

  64.                                                 <li>
    65. 

  65.                                                     <a class="ep-draggable-item" tid="testModule.html">
    66. 

  66.                                                         <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
    67. 

  67.                                                         <span class="glyphicon-class">html</span>
    68. 

  68.                                                     </a>
    69. 

  69.                                                 </li>
    70. 

  70. 

  71.                                             </ul>
    72. 

  72.                                         </li>
    73. 

  73.                                         <li>
    74. 

  74.                                             <span class="title">辅助</span>
    75. 

  75.                                             <ul>
    76. 

  76.                                                 <li>
    77. 

  77.                                                     <a class="ep-draggable-item" tid="testModule.hline" style="">
    78. 

  78. 

  79.                                                         <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
    80. 

  80.                                                         <span class="glyphicon-class">横线</span>
    81. 

  81.                                                     </a>
    82. 

  82.                                                 </li>
    83. 

  83. 

  84.                                                 <li>
    85. 

  85.                                                     <a class="ep-draggable-item" tid="testModule.vline" style="">
    86. 

  86.                                                         <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
    87. 

  87.                                                         <span class="glyphicon-class">竖线</span>
    88. 

  88.                                                     </a>
    89. 

  89.                                                 </li>
    90. 

  90.                                                 <li>
    91. 

  91.                                                     <a class="ep-draggable-item" tid="testModule.rect">
    92. 

  92.                                                         <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
    93. 

  93.                                                         <span class="glyphicon-class">矩形</span>
    94. 

  94.                                                     </a>
    95. 

  95.                                                 </li>
    96. 

  96.                                                 <li>
    97. 

  97.                                                     <a class="ep-draggable-item" tid="testModule.oval">
    98. 

  98.                                                         <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
    99. 

  99.                                                         <span class="glyphicon-class">椭圆</span>
    100. 

  100.                                                     </a>
    101. 

  101.                                                 </li>
    102. 

  102.                                             </ul>
    103. 

  103.                                         </li>
    104. 

  104.                                     </ul>
    105. 

  105.                                 </div>
    106. 

  106. 

  107.                             </div>
    108. 

  108.                             <div class="col-sm-9 col-md-10">
    109. 

  109.                                 <div class="hiprint-toolbar" style="margin-top:15px;">
    110. 

  110.                                     <ul>
    111. 

  111.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
    112. 

  112.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
    113. 

  113.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
    114. 

  114.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
    115. 

  115.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
    116. 

  116.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>
    117. 

  117.                                         
    118. 

  118.                                         <li><a class="hiprint-toolbar-item"><input type="text" id="customWidth" style="width: 50px;height: 19px;border: 0px;" placeholder="宽/mm" /></a></li>
    119. 

  119.                                         <li><a class="hiprint-toolbar-item"><input type="text" id="customHeight" style="width: 50px;height: 19px;border: 0px;" placeholder="高/mm" /></a></li>
    120. 

  120. 

  121.                                         <li><a class="hiprint-toolbar-item" onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a></li>
    122. 

  122.                                         <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
    123. 

  123.                                         <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>
    124. 

  124.                                        
    125. 

  125.                                         <li>
    126. 

  126.                                             <a class="btn hiprint-toolbar-item " style="color: #fff;
    127. 

  127.     background-color: #d9534f;
    128. 

  128.     border-color: #d43f3a;" id="A4_preview">快速预览</a>
    129. 

  129.                                         </li>
    130. 

  130.                                         <li>
    131. 

  131.                                             <a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff;
    132. 

  132.     background-color: #d9534f;
    133. 

  133.     border-color: #d43f3a;">打印</a>
    134. 

  134.                                         </li>
    135. 

  135. 

  136.                                     </ul>
    137. 

  137.                                     <div style="clear:both;"></div>
    138. 

  138.                                 </div>
    139. 

  139.                                 <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">
    140. 

  140. 

  141.                                 </div>
    142. 

  142.                                 <div style="padding-top:15px;">
    143. 

  143.                                     <button type="button" class="btn btn-primary" id="A4_getJson_toTextarea">生成json到textarea</button>
    144. 

  144.                                 </div>
    145. 

  145.                                 <div class="hinnn-callout hinnn-callout-danger">
    146. 

  146. 

  147.                                     <p><code>可视化</code>结果以Json的形式存在，用户可以<code>编辑Json</code>实现特殊化操作，如：数据<code>formatter</code>，<code>文本变色</code>,单元格<code>改变背景</code>等。具体请参考文档。</p>
    148. 

  148.                                 </div>
    149. 

  149.                                 <textarea class="form-control" rows="10" id="A4_textarea_json"></textarea>
    150. 

  150.                                 <div style="padding:15px 0;">
    151. 

  151.                                     <button type="button" class="btn btn-danger" id="A4_getHtml_toTextarea">生成html到textarea</button>
    152. 

  152.                                 </div>
    153. 

  153. 

  154.                                 <textarea class="form-control" rows="10" id="A4_textarea_html">
    155. 

  155. 

  156.                             </textarea>
    157. 

  157.                                 <div class="row">
    158. 

  158. 

  159.                                     <div class="col-md-12">
    160. 

  160.                                         <div class="hinnn-docs-section">
    161. 

  161.                                             <h1 class="page-header">票据定位打印</h1>
    162. 

  162.                                             <p class="simpaleExplain">hiprint 票据定位打印，用户通过拖拽矩形，椭圆，横线，竖线等来设计票据布局。然后在对应的位置填充文本。操作简单，可视化操作。几分钟时间就可以设计好一个复杂的票据模板。<code>票据定位打印-图片背景请查看在线实例</code>
    163. 

  163.                                         </div>
    164. 

  164.                                         <div class="hiprint-toolbar" style="margin-top:15px;">
    165. 

  165.                                             <ul>
    166. 

  166.                                                 <li>
    167. 

  167.                                                     <a class="btn hiprint-toolbar-item " style="color: #fff;
    168. 

  168.     background-color: #d9534f;
    169. 

  169.     border-color: #d43f3a;" id="bill_preview">快速预览</a>
    170. 

  170.                                                 </li>
    171. 

  171.                                                 <li>
    172. 

  172.                                                     <a class="btn hiprint-toolbar-item " style="color: #fff;
    173. 

  173.     background-color: #d9534f;
    174. 

  174.     border-color: #d43f3a;" id="bill_print">打印</a>
    175. 

  175.                                                 </li>
    176. 

  176. 

  177.                                             </ul>
    178. 

  178.                                             <div style="clear:both;"></div>
    179. 

  179.                                         </div>
    180. 

  180.                                         <div id="hiprint-printTemplate_bill" class="hiprint-printTemplate">
    181. 

  181. 

  182.                                         </div>
    183. 

  183. 

  184.                                         <div class="hinnn-callout hinnn-callout-danger">
    185. 

  185.                                             <p><code>可视化票据</code>结果以Json的形式存在，用户可以<code>编辑Json</code>实现特殊化操作，如：数据<code>formatter</code>，<code>文本变色</code>,单元格<code>改变背景</code>等。具体请参考文档。</p>
    186. 

  186.                                         </div>
    187. 

  187.                                         <textarea class="form-control" rows="10" id="textarea_bill">{"panels":[{"index":0,"height":148,"width":210,"paperHeader":-1.5,"paperFooter":380,"printElements":[{"options":{"left":540,"top":10.5,"height":35,"width":33,"borderColor":"#f20000"},"printElementType":{"title":"椭圆","type":"oval"}},{"options":{"left":454.5,"top":15,"height":18,"width":74,"title":"8888888","fontSize":18,"fontWeight":"600","color":"#2935e3","textAlign":"center","lineHeight":16},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":424.5,"top":15,"height":19,"width":24,"title":"NO","fontSize":18,"color":"#2935e3","textAlign":"center","lineHeight":15},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":190.5,"top":15,"height":21,"width":226,"title":"上海增值税普通发票","fontSize":18,"fontWeight":"600","letterSpacing":2.5,"color":"#cc5a5a","textAlign":"center","lineHeight":18},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":244.5,"top":19.5,"height":51,"width":112,"borderColor":"#eb1111","borderWidth":"2"},"printElementType":{"title":"椭圆","type":"oval"}},{"options":{"left":90,"top":19.5,"height":21,"width":96,"title":"8888888","fontSize":19,"letterSpacing":1,"color":"#2935e3","textAlign":"center","lineHeight":18},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":19.5,"top":19.5,"height":61,"width":65,"title":"031001800204","textType":"qrcode"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":250.5,"top":25.5,"height":42,"width":104,"borderColor":"#f00505"},"printElementType":{"title":"椭圆","type":"oval"}},{"options":{"left":190.5,"top":45,"height":10,"width":228,"borderColor":"#b5a8a8"},"printElementType":{"title":"横线","type":"hline"}},{"options":{"left":190.5,"top":49.5,"height":10,"width":228,"borderColor":"#baafaf"},"printElementType":{"title":"横线","type":"hline"}},{"options":{"left":244.5,"top":55.5,"height":22,"width":120,"title":"发票联","fontSize":18,"fontWeight":"600","letterSpacing":8,"color":"#cc5a5a","textAlign":"center","lineHeight":18},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":510,"top":55.5,"height":13,"width":69,"title":"2019年05月09日","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":445.5,"top":55.5,"height":15,"width":57,"title":"开票日期：","color":"#cc5a5a","lineHeight":13},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":90,"top":64.5,"height":15,"width":141,"title":"校验码：123456 788942 52344","color":"#2935e3","textAlign":"center","lineHeight":13},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":400,"top":90,"height":60,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":35,"top":90,"height":60,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":420,"top":90,"height":61,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":10.5,"top":90,"height":282,"width":572,"borderColor":"#cc5a5a"},"printElementType":{"title":"矩形","type":"rect"}},{"options":{"left":405,"top":94.5,"height":55,"width":13,"title":"密码区","fontSize":13,"color":"#cc5a5a","lineHeight":18},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":424.5,"top":94.5,"height":50,"width":152,"title":"","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":15,"top":94.5,"height":53,"width":15,"title":"购买方","fontSize":13,"color":"#cc5a5a","lineHeight":18},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":45,"top":100.5,"height":10,"width":348,"title":"名称：北京地铁税务局有限公司","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":45,"top":115.5,"height":10,"width":347,"title":"纳税人识别号：999999999999999999","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":45,"top":130.5,"height":10,"width":347,"title":"地址、电话：18888888888","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":345,"top":150,"height":190,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":409.5,"top":150,"height":190,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":295.5,"top":150,"height":190,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":480,"top":150,"height":190,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":215,"top":150,"height":224,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":520.5,"top":150,"height":190,"width":10,"borderColor":"#cc5a5a"},"printElementType":{"title":"竖线","type":"vline"}},{"options":{"left":10,"top":150,"height":10,"width":574,"borderColor":"#cc5a5a"},"printElementType":{"title":"横线","type":"hline"}},{"options":{"left":300,"top":160.5,"height":10,"width":36,"title":"单位","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":349.5,"top":160.5,"height":11,"width":51,"title":"数量","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":225,"top":160.5,"height":10,"width":62,"title":"规格名称","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":420,"top":160.5,"height":10,"width":53,"title":"单价","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":484.5,"top":160.5,"height":10,"width":32,"title":"税率","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":525,"top":160.5,"height":10,"width":52,"title":"税额","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":19.5,"top":160.5,"height":10,"width":184,"title":"货物或应税劳务、服务名称","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":40.5,"top":175.5,"height":12,"width":120,"title":"*餐饮服务*餐费","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":10.5,"top":340.5,"height":10,"width":574,"borderColor":"#cc5a5a"},"printElementType":{"title":"横线","type":"hline"}},{"options":{"left":225,"top":349.5,"height":14,"width":229,"title":"壹佰贰拾元整","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":460.5,"top":349.5,"height":13,"width":58,"title":"（小写）","fontSize":13,"color":"#cc5a5a"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":520.5,"top":349.5,"height":13,"width":48,"title":"￥100.00","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":15,"top":349.5,"height":14,"width":193,"title":"价税合计（大写）","fontSize":13,"color":"#cc5a5a","textAlign":"center"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":300,"top":385.5,"height":10,"width":39,"title":"开票人：","color":"#cc5a5a"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":190.5,"top":385.5,"height":10,"width":103,"title":"轩大可","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":150,"top":385.5,"height":10,"width":33,"title":"复核：","color":"#cc5a5a"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":345,"top":385.5,"height":10,"width":86,"title":"张天天","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":64.5,"top":385.5,"height":10,"width":78,"title":"轩天天","color":"#2935e3"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":439.5,"top":385.5,"height":10,"width":40,"title":"销售方：","color":"#cc5a5a"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":15,"top":385.5,"height":10,"width":44,"title":"收款人：","color":"#cc5a5a"},"printElementType":{"title":"文本","type":"text"}}],"paperNumberLeft":565.5,"paperNumberTop":394.5,"paperNumberDisabled":true}]}</textarea>
    188. 

  188. 

  189.                                     </div>
    190. 

  190. 

  191.                                 </div>
    192. 

  192. 

  193.                                 <h2>条码打印测试</h2>
    194. 

  194.                                 <p class="simpaleExplain">点击下方快速预览即可快速生成条形码打印预览</p>
    195. 

  195. 

  196.                                 <textarea class="form-control" rows="10" id="textarea_barcode">{"panels":[{"index":0,"height":20,"width":40,"paperHeader":0,"paperFooter":130,"printElements":[{"options":{"left":5,"top":5,"height":23,"width":72,"field":"barcode","testData":"1234556","textType":"barcode"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":5,"top":40,"height":13,"width":93,"field":"name","hideTitle":"1"},"printElementType":{"title":"文本","type":"text"}}],"paperNumberDisabled":true,"rotate":true}]}</textarea>
    197. 

  197.                                 <div style="padding-top:15px;">
    198. 

  198.                                     <button type="button" id="barcode_button_preview" class="btn btn-primary">快速预览</button>
    199. 

  199.                                     <button type="button" id="barcode_button_print" class="btn btn-danger">测试打印</button>
    200. 

  200.                                 </div>
    201. 

  201. 

  202. 

  203. 

  204.                                 <h2>条码打印测试</h2>
    205. 

  205.                                 <p class="simpaleExplain">代码生成打印模板，所有拖拽结果形成的json都可以通过代码添加的方式完成。</p>
    206. 

  206.                                 <figure class="highlight">
    207. 

  207.                                     <pre><code class="language-html" data-lang="html">
    208. 

  208.                                     <span class="c">&lt;!-- hiprint 打印初始化，更多参数请查看文档 --&gt;</span>
    209. 

  209.     hiprint.init();
    210. 

  210.                                     <span class="c">&lt;!-- 创建打印模板对象--&gt;</span>
    211. 

  211.     var hiprintTemplate = new hiprint.PrintTemplate();
    212. 

  212.                                     <span class="c">&lt;!-- 模板对象添加打印面板 paperHeader：页眉线 paperFooter：页尾线--&gt;</span>
    213. 

  213.     var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
    214. 

  214.                                     <span class="c">&lt;!-- 文本 打印面板添加文本元素--&gt;</span>
    215. 

  215.     panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hinnn插件手动添加text', textAlign: 'center' } });
    216. 

  216.                                     <span class="c">&lt;!-- 条形码 打印面板添加条形码元素--&gt;</span>
    217. 

  217.     panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
    218. 

  218.                                     <span class="c">&lt;!-- 二维码 打印面板添加二维码元素--&gt;</span>
    219. 

  219.     panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '二维码', textType: 'qrcode' } });
    220. 

  220.                                     <span class="c">&lt;!-- 长文本 打印面板添加长文本元素--&gt;</span>
    221. 

  221.     panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：' } });
    222. 

  222.                                     <span class="c">&lt;!-- 表格 打印面板添加表格元素 content为字符串 --&gt;</span>
    223. 

  223.     panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
    224. 

  224.                                     <span class="c">&lt;!-- html 打印面板添加自定义html content为字符串或$('..') --&gt;</span>
    225. 

  225.     panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
    226. 

  226.                                     <span class="c">&lt;!-- 竖线 --&gt;</span>
    227. 

  227.     panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
    228. 

  228.                                     <span class="c">&lt;!-- 横线 --&gt;</span>
    229. 

  229.     panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
    230. 

  230.                                     <span class="c">&lt;!-- 矩形 --&gt;</span>
    231. 

  231.     panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
    232. 

  232. 

  233. </code></pre>
    234. 

  234.                                 </figure>
    235. 

  235.                             </div>
    236. 

  236.                         </div>
    237. 

  237.                     </div>
    238. 

  238.                 </div>
    239. 

  239. 

  240.             </div>
    241. 

  241. 

  242.         </content>
    243. 

  243.         <sider class="hinnn-layout-sider" style="">
    244. 

  244.             <div class="container height-100-per" style="width:250px;">
    245. 

  245.                 <div class="row">
    246. 

  246.                     <div class="col-sm-12">
    247. 

  247.                         <div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
    248. 

  248.                     </div>
    249. 

  249.                 </div>
    250. 

  250.             </div>
    251. 

  251. 

  252. 

  253.         </sider>
    254. 

  254.     </layout>
    255. 

  255. 

  256. 

  257.     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    258. 

  258.         <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
    259. 

  259.             <div class="modal-content">
    260. 

  260.                 <div class="modal-header">
    261. 

  261.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    262. 

  262.                     <h4 class="modal-title" id="myModalLabel">打印预览</h4>
    263. 

  263.                 </div>
    264. 

  264. 

  265.                 <div class="modal-body">
    266. 

  266.                     <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
    267. 

  267.                     <div class="prevViewDiv"></div>
    268. 

  268.                 </div>
    269. 

  269.                 <div class="modal-footer">
    270. 

  270.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    271. 

  271. 

  272.                 </div>
    273. 

  273.             </div>
    274. 

  274.         </div>
    275. 

  275.     </div>
    276. 

  276. 

  277. 

  278.     <!--[[ 测试专用  单独使用无需引入  -->
    279. 

  279.     <script src="custom_test/custom-etype-provider.js"></script>
    280. 

  280.     <script src="custom_test/custom-print-json.js"></script>
    281. 

  281.     <script src="custom_test/print-data.js"></script>
    282. 

  282.     <!--测试专用  单独使用无需引入 ]]  -->
    283. 

  283.     <!--单独使用无需引入  -->
    284. 

  284.     <script src="polyfill.min.js"></script>
    285. 

  285.     <script src="plugins/jquery.minicolors.min.js"></script>
    286. 

  286.     <script src="plugins/JsBarcode.all.min.js"></script>
    287. 

  287.     <script src="plugins/qrcode.js"></script>
    288. 

  288.     <script src="hiprint.bundle.js"></script>
    289. 

  289.     <script src="plugins/jquery.hiwprint.js"></script>
    290. 

  290.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    291. 

  291. 

  292.     <script>
    293. 

  293.         var hiprintTemplate;
    294. 

  294.         $(document).ready(function () {
    295. 

  295.            
    296. 

  296.             //初始化打印插件
    297. 

  297.             hiprint.init({
    298. 

  298.                 providers: [new customElementTypeProvider()]
    299. 

  299.             });
    300. 

  300. 

  301.             //hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');
    302. 

  302.             //设置左侧拖拽事件
    303. 

  303.             hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
    304. 

  304. 

  305.             hiprintTemplate = new hiprint.PrintTemplate({
    306. 

  306.                 template: customPrintJson,
    307. 

  307.                 settingContainer: '#PrintElementOptionSetting',
    308. 

  308.                 paginationContainer: '.hiprint-printPagination'
    309. 

  309.             });
    310. 

  310.             //打印设计
    311. 

  311.             hiprintTemplate.design('#hiprint-printTemplate');
    312. 

  312. 

  313.             $('#A4_preview').click(function () {
    314. 

  314.                 $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printData))
    315. 

  315.                 $('#myModal').modal('show')
    316. 

  316.             });
    317. 

  317.             $('#A4_directPrint').click(function () {
    318. 

  318.                 hiprintTemplate.print(printData);
    319. 

  319.             });
    320. 

  320.             $('#A4_printByHtml').click(function () {
    321. 

  321.                 hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
    322. 

  322.             })
    323. 

  323.             $('#A4_getJson_toTextarea').click(function () {
    324. 

  324.                 $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
    325. 

  325.             })
    326. 

  326.             $('#A4_getHtml_toTextarea').click(function () {
    327. 

  327.                 $('#A4_textarea_html').val(hiprintTemplate.getHtml(printData)[0].outerHTML)
    328. 

  328.             })
    329. 

  329.         });
    330. 

  330. 

  331.         //调整纸张
    332. 

  332.         var setPaper = function (paperTypeOrWidth, height) {
    333. 

  333.             hiprintTemplate.setPaper(paperTypeOrWidth, height);
    334. 

  334.         }
    335. 

  335. 

  336.         //旋转
    337. 

  337.         var rotatePaper = function () {
    338. 

  338.             hiprintTemplate.rotatePaper();
    339. 

  339.         }
    340. 

  340.         var clearTemplate = function () {
    341. 

  341.             hiprintTemplate.clear();
    342. 

  342.         }
    343. 

  343. 

  344.     </script>
    345. 

  345. 

  346.     <script>
    347. 

  347.         $(document).ready(function () {
    348. 

  348.             //设置左侧拖拽事件
    349. 

  349.             var hiprintTemplate_bill = new hiprint.PrintTemplate({
    350. 

  350.                 template: JSON.parse($('#textarea_bill').val()),
    351. 

  351.                 settingContainer: '#PrintElementOptionSetting'
    352. 

  352.             });
    353. 

  353.             //打印设计
    354. 

  354.             hiprintTemplate_bill.design('#hiprint-printTemplate_bill');
    355. 

  355. 

  356.             $('#bill_preview').click(function () {
    357. 

  357.                 $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate_bill.getHtml(printData))
    358. 

  358.                 $('#myModal').modal('show')
    359. 

  359.             });
    360. 

  360.             $('#bill_print').click(function () {
    361. 

  361.                 hiprintTemplate_bill.print(printData);
    362. 

  362.             });
    363. 

  363.         });
    364. 

  364. 

  365. 

  366.     </script>
    367. 

  367. 

  368.     <script type="text/javascript">
    369. 

  369.         $(document).ready(function () {
    370. 

  370.             $('#barcode_button_preview').click(function () {
    371. 

  371.                 var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) });
    372. 

  372. 

  373.                 var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])
    374. 

  374. 

  375.                 $('#myModal .modal-body .prevViewDiv').html($html)
    376. 

  376.                 $('#myModal').modal('show')
    377. 

  377.             });
    378. 

  378. 

  379.             $('#barcode_button_print').click(function () {
    380. 

  380.                 var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) });
    381. 

  381. 

  382.                 var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])
    383. 

  383.                 barCodehiprintTemplate.printByHtml($html);
    384. 

  384. 

  385.             });
    386. 

  386.         })
    387. 

  387.     </script>
    388. 

  388. 

  389. </body>
    390. 

  390. </html>
    391.