页面上引入bootstrap 相关 js
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>
html 页面 的 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() 最好是加上,可以控制打印窗口关闭后 直接 关闭新打开的窗口。