HTML5教程

HTML针式打印机打印模板

本文主要是介绍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针式打印机打印模板的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航