这两天写了个页面打印,但是查了好多的方法,从中间找到一个合适自己的一个方法吧,第一个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> 返回</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里面的数据