HTML针式打印机打印模板
2021/5/30 18:24:11
本文主要是介绍HTML针式打印机打印模板,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
直接复制在html文件中,然后把打印的内容放在.orderprint中,然后根据需要调整大小即可.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="__PUBLIC__/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="__PUBLIC__/static/css/seller_center.css" rel="stylesheet" type="text/css" /> <link href="__PUBLIC__/static/font/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> <!--[if IE 7]> <link rel="stylesheet" href="__PUBLIC__/static/font/font-awesome/css/font-awesome-ie7.min.css"> <![endif]--> <style type="text/css"> body { background: #FFF none; } .ncsc-order-details { width: 50%; box-sizing: border-box; } .ncsc-order-details:last-child { border-right: 0 } .ncsc-order-details .content dl dd a, .ncsc-order-contnet .daddress-info dd a { float: none; padding-left: 0 } .A4 { page-break-before: auto; page-break-after: always; } .print-layout { width: 241mm; height: 140mm; margin: 20px auto 0; padding: 0; } .print-layout .print-page { width: 100%; height: 100%; top: 0; left: 0; margin: 0; overflow: hidden; } .orderprint { width: 100%; height: 100%; padding: 0; } .orderprint .top { width: auto; } .buyer-info { margin: 15px 15px; } .ncsc-order-details .content { padding: 5px 15px 0px 15px; } .ncsc-order-details .content dl, .ncsc-order-contnet .daddress-info { margin-bottom: 5px; } </style> <title>针式打印机打印模板</title> </head> <body> <div class="batch" style="text-align: center;margin-top: 15px;"> <div class="print-btn" id="printbtn" title="选择喷墨或激光打印机<br/>根据下列纸张描述进行<br/>设置并打印发货单据"> <i></i> <a href="javascript:void(0);" onclick="preview();" class="ncap-btn-big ncap-btn-green"><i class="fa fa-print"></i>打印</a> </div> </div> <!--startprint--> <volist name="orders" id="vo"> <div class="print-layout" style="page-break-after:always;"> <div class="print-page"> <div id="printarea"> <div class="orderprint"> </div> </div> </div> </div> <div></div> </volist> <!--endprint--> <script type="text/javascript"> function preview() { bdhtml = window.document.body.innerHTML;//获取当前页的html代码 sprnstr = "<!--startprint-->";//设置打印开始区域 eprnstr = "<!--endprint-->";//设置打印结束区域 prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17); //从开始代码向后取html prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; } </script> </body> </html>
这篇关于HTML针式打印机打印模板的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-26uniapp 哪里看mp-html 是否有引用-icode9专业技术文章分享
- 2024-09-26uniapp 怎么显示html 代码-icode9专业技术文章分享
- 2024-09-26uniapp 有没有自带mp-html 吗-icode9专业技术文章分享
- 2024-09-25前端高频大厂面试真题解析与实战教程
- 2024-09-25前端高频面试题详解:新手必看指南
- 2024-09-25前端高频面试真题详解与实战攻略
- 2024-09-25前端大厂面试真题及答案详解:从零开始的初级面试攻略
- 2024-09-25前端面试实战:新手必备技巧与案例解析
- 2024-09-25前端面试题及答案详解:初级面试必备
- 2024-09-25前端面试真题及答案详解:适合入门与初级用户