1.JS调用浏览器打印功能打印:
window.print();
2.指定div区域和解决Bootstrap失效无法打印问题:
function printHtml(html) { var bodyHtml = document.body.innerHTML; document.body.innerHTML = html; window.print(); document.body.innerHTML = bodyHtml; } function onprint() { var html = $("#printArea").html(); printHtml(html); }
页面调用
<div class="container"> <div class="panel panel-primary" id="printArea"> <div class="panel-heading"> <h3 class="panel-title">xxx标题xxx</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-3"><label>内容:</label></div> <div class="col-xs-3"><label>内容:</label></div> <div class="col-xs-3"><label>内容:</label></div> <div class="col-xs-3"><label>内容:</label></div> </div> <hr/> <!----> </div> </div> <div class="row text-center"> <button id="printFun" class="btn btn-lg btn-default" οnclick="onprint()">打印</button> </div> </div>
注意打印按钮和打印区域的位置,防止将打印按钮打印进去;
因Bootstrap的css预设了打印样式,所以默认打印效果受影响,但网上解决办法千篇一律(@media print问题),并未明确说明如何改动并生效,这里未改动css样式,而是直接获取html内容重新拼接,同时实现了指定div区域,所以打印只保留了基本样式和布局,如果有额外需求还需编辑css;
更多方案还请留言指教