Web JS/jQuery调用浏览器打印功能指定div区域打印和Bootstrap失效无法打印问题

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；

更多方案还请留言指教