响应式状态时的jqprint打印

最近须要打印，使用jqprint 进行打印，页面状态是电脑平板都能正常显示的响应式页面，打印时因为要打印在一个A4纸上，须要定义打印的宽度，而且点击打印的同时，须要修改页面的样式
从而保证页面内容打印在A4纸张的范围内（点击打印前是响应式的，打印时是固定的宽度），主要代码以下：
$("#printArea").css("width","295mm");
$(".row .col-md-6").removeClass("col-md-6").addClass("col-xs-6");

//Bootstrap栅格系统从原来中屏幕为2列，小于中屏幕为1列，点击打印时都为2列
$("#printArea").jqprint();

若是设置特定的位置分页，须要加下面的代码

<div style="page-break-after:always;"></div>

假如要打印的页面中含有表格，个人是bootstrap框架的表格，打印预览时表格边框比较细，缘由估计是bootstrap样式@media print {}设置的边框比较淡，咱们能够不用bootstrap的样式，在打印区域中设置样式，或者在单独的css文件中定义样式，2种设置样式的详细例子以下：

<div id="printArea">
    <style type="text/css">
    .printTab {
        width: 100%;
        font-size: 22px;
        border: 1px solid #333
    }

    .printTab>thead>tr>th,
    .printTab>tbody>tr>th,
    .printTab>thead>tr>td,
    .printTab>tbody>tr>td {
        border: 1px solid #333;
        padding: 8px
    }
    </style>
    
    <div class="orderTable">
        <table class="printTab" style="">
            <thead>
                <tr class="">
                    <th>终端客户</th>
                    <th>供货数量（吨）</th>
                    <th>价格（元/吨）</th>
                    <th>气源地</th>
                    <th>供货时间</th>
                </tr>
            </thead>
            <tbody>
                <tr class="">
                    <td>宜兴港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
                <tr class="">
                    <td>徐州港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
                <tr class="">
                    <td>泰州港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
            </tbody>
        </table>
    </div>

或者

@media print {
.printTab{width:100%;font-size:22px;border:1px solid #333}
.printTab>thead>tr>th, .printTab>tbody>tr>th, .printTab>thead>tr>td, .printTab>tbody>tr>td{border: 1px solid #333;padding:8px}
}

注意：须要打印的css必定要外链形式，必要的时候加!important;每每@media print{}须要覆盖网页显示的样式

更多js知识

若有疑问请关注微信公众号：**前端之攻略，**我会详细解答，此公众号我也会按期更新前端有关知识