web前端

给指定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
上一篇下一篇

猜你喜欢

热点阅读