Print.js实现打印

2019-06-04 21:27:38

插件地址

html代码

  • size
    • auto - 自动(默认为纵向)
    • portrait - 纵向
    • landscape - 横向
  • margin: 0mm auto; - 去掉页眉页脚
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <link rel="stylesheet" href="./layui/css/layui.css" />
  7. <link rel="stylesheet" href="./print/files/comm.css" />
  8. <script type="text/javascript" src="./print/files/Print.js" ></script>
  9. <style>
  10. .main {
  11. width: 80%;
  12. margin: 15px auto;
  13. }
  14. </style>
  15. <style media="print">
  16. @page {
  17. size: landscape; /* auto is the initial value */
  18. margin: 0mm auto; /* this affects the margin in the printer settings */
  19. }
  20. /*@page{*/
  21. /* size:portrait;// 或landscape 设置横纵向打印*/
  22. /* margin:0mm auto*/
  23. /*}*/
  24. </style>
  25. </head>
  26. <body>
  27. <div class="layui-main" style="margin: 25px auto;">
  28. <a class="layui-btn" id="printBtn">打印</a>
  29. </div>
  30. <div class="main" id="main-data">
  31. <p>测试数据</p>
  32. </div>
  33. <script>
  34. document.getElementById('printBtn').onclick = function () {
  35. Print('#main-data', {
  36. onStart: function () {
  37. },
  38. onEnd: function () {
  39. }
  40. })
  41. }
  42. </script>
  43. </body>
  44. </html>

1
1
0

添加评论

正在回复:
取消
0
1
1
0