Bootstrap modal弹出框实现打印的功能，无须跳转页面

html页面：

<div class="modal fade" id="viewModal" tabindex="-3" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 260%; margin-left: -82%;">
<div class="modal-header">
<div id="UseForPrint" style="display:none">
<h2>供应商资格审查表</h2>
<table class="table cent" style="width:100%">
<caption class="printXM" style="font-size: 18px;"></caption>
<thead>
<tr>
<th>序号</th>
<th>供应商</th>
<th>审查结果</th>
</tr>
</thead>
<tbody class="addTd2">
</tbody>
</table>

</div>
<div class="text-center">
<button type="button" class="btn btn-primary" onclick="printpage()">打印资格审查结果</button>
</div>
</div>
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">关闭</div>
</div>
</div>
</div>
</div>

html 页面 的 class="modal-body 可以 设置一些样式，控制内容，

js：

通过事件把上面的 modal 弹出，$("#popprintSheet").modal();

这个页面上也可以增加一个 打印的按钮直触发输内容；

下面的是 打印方法：

var printpage = function (){
var printHtml = $("#UseForPrint").html();
var wind = window.open("", "newwin", "toolbar=no,scrollbars=yes,menubar=no");
var ss = "<style>"
+"#UseForPrint{width:860px}"
+".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;}"
+".cent tr{height: 40px;"
+"line-height: 40px;"
+"text-align: center;"
+"width:100%}"
+"</style>";

printHtml = ss + printHtml;
wind.document.body.innerHTML = printHtml;
wind.print();
wind.close();
}

 

mydiv 输出内容的div

ss可以增加一些样式 控制弹出页面；

 wind.close() 最好是加上，可以控制打印窗口关闭后 直接 关闭新打开的窗口。