zoukankan      html  css  js  c++  java
  • 页面打印功能

    这两天写了个页面打印,但是查了好多的方法,从中间找到一个合适自己的一个方法吧,第一个lodop需要下载插件,我放弃了,第二中导出文件这个也放弃了,采用浏览器带的右键打印功能,既可以页面打印也可以进行保存文件到本地打印,废话不多说之间上代码:

    <!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里面的数据
  • 相关阅读:
    同台电脑 多Git账号同时使用
    netty对http协议解析原理解析(转载)
    Netty 线程模型与Reactor 模式
    增量/存量数据按时间维度分组
    网易技术分享:Nginx缓存引发的跨域惨案
    全面剖析Redis Cluster原理和应用
    聊聊阿里社招面试,谈谈“野生”Java程序员学习的道路
    美团点评基于 Flink 的实时数仓建设实践
    美团技术分享:大众点评App的短视频耗电量优化实战
    美团技术分享:美团深度学习系统的工程实践
  • 原文地址:https://www.cnblogs.com/boyliuc/p/9624529.html
Copyright © 2011-2022 走看看