html 页面:
<div class="modal fade" id="popPrintSheet" role="dialog" aria-labelledby="printSheet" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog middle-size"> <div class="modal-content marginT20px"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="printSheetTitle" >CoverSheet Print</h4> </div> <div class="modal-body left20pc-right" style="height:800px; overflow:scroll;"> <div id="showCoverSheetTmpl" style="display: none;"></div> </div> </div> </div> </div>
class="modal-body 可以 设置一些样式,控制内容,
js:
通过事件把上面的 modal 弹出,$("#popPrintSheet").modal();
这个页面上也可以增加一个 打印的按钮直触发输内容;
下面的是 打印方法:
var printpage = function (myDiv){ var printHtml = document.getElementById(myDiv).innerHTML; var wind = window.open("", "newwin", "toolbar=no,scrollbars=yes,menubar=no"); var ss = "<style>" +".coversheet-pageBoder{" +" padding: 10px;" +" margin-top: 10px;" +" border: 1px solid gray;" +" page-break-after: always;" +" border-radius: 5px;" +" box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);" +"}" +".noprint{display: none;}" +"</style>"; printHtml = ss + printHtml; wind.document.body.innerHTML = printHtml; wind.print(); wind.close(); };
mydiv 输出内容的div
ss可以增加一些样式 控制弹出页面;
wind.close() 最好是加上,可以控制打印窗口关闭后 直接 关闭新打开的窗口。