给指定div区域打印功能

我有一个这样的需要打印表格,但是表格数据因数据太多数据显示不全,该功能是我很头疼,按需求是找到一个给指定区域打印表格的数据区域,因此引用了一个叫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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容