頁面打印功能

時間 2019-11-15

標籤頁面打印功能简体版

原文原文鏈接

這兩天寫了個頁面打印，可是查了好多的方法，從中間找到一個合適本身的一個方法吧，第一個lodop須要下載插件，我放棄了，第二中導出文件這個也放棄了，採用瀏覽器帶的右鍵打印功能，既能夠頁面打印也能夠進行保存文件到本地打印，廢話很少說之間上代碼：css

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css::header('送貨單')">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>
</head>
<body>
<div id="guancheng" class="container-fluid" v-cloak>
    <div class="row">
        <div class="col-md-2">
            <a class="btn btn-primary btn-sm" @click="showRules=false"><i class="fa fa-reply-all"></i>&nbsp;返回</a>
            <button id="print" class="btn btn-primary btn-sm">打印出貨單</button>
        </div>
    </div>
    <hr>
    <div class="row">
        <div id ="print_content" class="panel panel-primary">
            <div class="panel-heading">
                <span>購貨單位:</span>
                <span style="float:right;">No_________</span>
            </div>
            <hr/>
            <div class="panel-body" style="padding-bottom: 10px;">
                <table class="table text-center table-hover table-condensed table-bordered" v-show="rules.length!=0">
                    <thead>
                    <tr>
                        <th class="text-center">貨號</th>
                        <th class="text-center">品名規格</th>
                        <th class="text-center">單位</th>
                        <th class="text-center">數量</th>
                        <th class="text-center">重量</th>
                        <th class="text-center">單價</th>
                        <th class="text-center">金額</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in rules">
                        <td>{{ item.serialNumber }}</td>
                        <td>{{ item.specifications }}</td>
                        <td>{{ item.company }}</td>
                        <td>{{ item.number }}</td>
                        <td></td>
                        <td></td>
                        <td>{{ item.amountMoney }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-heading">
                <span style="margin:20px;">金額合計:</span>
                <span style="margin:20px;">拾</span>
                <span style="margin:20px;">萬</span>
                <span style="margin:20px;">仟</span>
                <span style="margin:20px;">佰</span>
                <span style="margin:20px;">拾</span>
                <span style="margin:20px;">元</span>
                <span style="margin:20px;">角</span>
                <span>分￥:</span>
                <hr/>
                <span>送貨單位:(蓋章)</span>
                <span style="margin:50px;">填票人：</span>
                <span style="margin:50px;">收貨人：</span>
            </div>
        </div>
    </div>
</div>
<div th:include="include/footer_js::footer"></div>
<script th:src="@{/js/base/stockRecord/list.js}"></script>
</body>
</html>

js :

printing: function() {  $("#" + "print").bind("click", function(){    var print_id = "print_content"; //要打印的div的id    var k = $("#" + print_id).prop("outerHTML");    $("body *").hide();    $("body").append(k);    window.print();    window.reload();  })}這個就不全粘出來了，實現的原理很簡單，就是打印body裏面的數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。