響應式狀態時的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知識

若有疑問請關注微信公衆號：**前端之攻略，**我會詳細解答，此公衆號我也會按期更新前端有關知識