给指定div区域打印功能
2020-01-05 本文已影响0人
一岁倾城
我有一个这样的需要打印表格,但是表格数据因数据太多数据显示不全,该功能是我很头疼,按需求是找到一个给指定区域打印表格的数据区域,因此引用了一个叫jquery.pint.js的一个打印插件,并做此记录。希望能帮到你ฅ( ̳• ·̫ • ̳)
一、引用jquery.pint.js插件
首先下载jquery.print.js
http://www.jq22.com/demo/jQueryPrint201709042243/jQuery.print.js
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jQuery.print.js"></script>
二、代码块
写一个按钮加入点击事件,再给你要打印的区域加一个id
<div>
<button class="print-link no-print" onclick="printele()">打印</button>
<div id="ele2">
<div>
<div style="width: 100px;height:300px;background: paleturquoise;">
<table width="100%" cellpadding="10" align="center" cellspacing="2" border="1" bordercolor="#ccc" style="height: 400px;">
......
</table>
</div>
</div>
</div>
</div>
三、事件块
<script type='text/javascript'>
//触发printele点击事件
function printele() {
$.print("#ele2");
}
</script>
四、查看效果
没点击打印前.png 点击打印后.png