項目中有時需要打印表格 或者文檔
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>全國專業(yè)人才儲備職業(yè)技能鑒定準考證</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>
//要打印的區(qū)域 雹有。#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
