jq打印 调用浏览器自带打印

项目中有时需要打印表格 或者文档
php可以先生成pdf再打印，但是很耗资源，并且不好排版
可以利用浏览器自带的打印功能
如谷歌浏览器 右键 打印

print.png

其他浏览器也一样

先写好html页面

微信图片_20181214162702.png

重点css

//这里是分页和限制每页为A4尺寸
   @page {
      size: A4;  /* auto is the initial value */
      size: A4 landscape;;  /* auto is the initial value */
      margin: 0; /* this affects the margin in the printer settings */
        text-align: center;
    }

    @media print{
        .box{
            size: A4;
            page-break-before: always;
           /* width: 210mm;
            height:297mm;*/
        }

    }

html页面

....
<link type="text/css" rel="stylesheet" href="{{ asset('print/css/print.css') }}" media="print"/>
//上方写好的css，注意 media="print" 才会生效
.....
<input class="test" type="button" name="printBut" value="打印" />
<section id="print">
<div class="box">
    <div>
        <div class="box_left">
            <h2>全国专业人才储备职业技能鉴定准考证</h2>
            <div class="table">
                <table>
                    <tr class="tr1 tr_information">
                        <td class="td1"><h3>姓 名</h3></td>
                        <td class="td2">{{ $item['username'] }}</td>
                        <td class="td3"><h3>性别</h3></td>
                        <td class="td4"></td>
                        <td class="td5" rowspan="4"></td>
                    </tr>

                    。。。。
    </div>
</div>
</section>
//要打印的区域 。#print

js 引用query.PrintArea.js 或用原生js 打印

<script src="/jq/jquery-1.11.3.min.js"></script>
<script src="{{ asset('print/js/jquery.PrintArea.js') }}" type="text/JavaScript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.test').click(function(){
      $("#print").printArea();

  })
  
});

}
</script>

点击打印就可以了

0181214163703.png