printer_tuwen.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en" class="bg-white">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>单据打印</title>
  8. <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../../assets/module/admin.css?v=315"/>
  10. <!--[if lt IE 9]>
  11. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  12. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  13. <![endif]-->
  14. <style>
  15. .paper-info-group {
  16. padding: 15px 15px 15px 25px;
  17. }
  18. .paper-info-group h3 {
  19. font-weight: bold;
  20. color: #000000;
  21. padding-bottom: 8px;
  22. }
  23. .paper-info-group p {
  24. color: #666;
  25. padding-bottom: 12px;
  26. font-size: 16px;
  27. }
  28. .paper-info-group .paper-info-group-imgs {
  29. padding-top: 5px;
  30. }
  31. .paper-info-group .paper-info-group-imgs img {
  32. margin-right: 15px;
  33. margin-bottom: 15px;
  34. }
  35. .paper-info-group .paper-info-group-imgs img:last-child {
  36. margin-right: 0;
  37. }
  38. </style>
  39. </head>
  40. <body class="bg-white">
  41. <!-- 正文开始 -->
  42. <div class="paper-info-group">
  43. <h3>本周工作总结</h3>
  44. <p>完成了一个页面</p>
  45. <h3>下周工作计划</h3>
  46. <p>完成下一个页面</p>
  47. <h3>备注</h3>
  48. <p>无法重现</p>
  49. <div class="paper-info-group-imgs" id="paper-imgs">
  50. <img src="https://pic.qqtn.com/up/2018-9/15367146917869444.jpg" width="130px" height="130px">
  51. <img src="https://pic.qqtn.com/up/2018-9/15367146917869444.jpg" width="130px" height="130px">
  52. <img src="https://pic.qqtn.com/up/2018-9/15367146917869444.jpg" width="130px" height="130px">
  53. </div>
  54. <div class="text-right hide-print">
  55. <button class="layui-btn layui-btn-primary" ew-event="closeDialog">关闭</button>
  56. <button class="layui-btn" id="btnPrint">打印</button>
  57. </div>
  58. </div>
  59. <!-- js部分 -->
  60. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  61. <script type="text/javascript" src="../../../assets/js/common.js?v=315"></script>
  62. <script>
  63. layui.use(['printer', 'admin'], function () {
  64. var $ = layui.jquery;
  65. var printer = layui.printer;
  66. var admin = layui.admin;
  67. // 打印当前页面
  68. $('#btnPrint').click(function () {
  69. printer.print();
  70. });
  71. admin.iframeAuto();
  72. });
  73. </script>
  74. </body>
  75. </html>