print.html 3.59 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head th:include="include :: header"></head>
    <title>库存交易明细</title>
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
    <!--<link href="css/font-awesome.min.css" rel="stylesheet" />-->
    <!--&lt;!&ndash;[if IE]>-->
    <!--<link href="css/font-awesome-ie7.min.css" rel="stylesheet" />-->
    <!--<![endif]&ndash;&gt;-->

    <style type="text/css">
        .table-bordered td, .table-bordered th {
            border: 1px solid #000 !important;
        }
        .table tbody tr td{
            padding: 3px;
            text-align: center;
        }
    </style>
</head>

<body id="ddd">
<div class="noprint container" style="text-align:right; padding: 20px;float: right">
    <span class="noprint" style="padding-left:20px;"><button type="button" onClick="a()"><i class="fa fa-print"></i> 打印</button></span>
</div>
<div class="container" style=" width:320px;/*height:228px;*/color: #333">
    <div class="row">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="dy-report table table-bordered"
               th:each="row:${container}">
            <tbody>
            <tr style="vertical-align:middle">
                <td >
                    <span th:text="${row.code}"  id="code"></span>
                </td>
                <td  width="15%" style="padding: 2px">
                    <img id="barcode"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:include="include :: footer"></div>
<style type="text/css">
    @media print {
        .noprint {
            display: none;
        }
    }
</style>
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript" src="../../../js/barcode/JsBarcode.all.js"></script>
<script type="text/javascript">
    var  barcodeStyle = {
        format: "CODE128",//选择要使用的条形码类型
        width:1,//设置条之间的宽度
        height:40,//高度
        displayValue:true,//是否在条形码下方显示文字
        // text:"456",//覆盖显示的文本
        // fontOptions:"bold italic",//使文字加粗体或变斜体
        font:"monospace",//设置文本的字体fantasy
        textAlign:"center",//设置文本的水平对齐方式
        textPosition:"bottom",//设置文本的垂直位置
        textMargin:1,//设置条形码和文本之间的间距
        fontSize:12,//设置文本的大小
        background:"#ffffff",//设置条形码的背景
        lineColor:"#000000",//设置条和文本的颜色。
        margin:1//设置条形码周围的空白边距
    };
    function print_qrcode() {
        $('.dy-report').each(function (i, item) {
            var code = $(this).children()[0].children[0].innerText;
            $("#barcode").JsBarcode($("#barcode").attr("data"), barcodeStyle);
            JsBarcode(document.getElementById("barcode"), code, barcodeStyle);

        });
    }
    print_qrcode();
</script>

<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript">
    function a(){
        $("#ddd").jqprint();
        print_qrcode();
    }
</script>

</body>
</html>