HTML局部打印,区域打印的两种实现方法总结 您所在的位置:网站首页 设置打印的范围 HTML局部打印,区域打印的两种实现方法总结

HTML局部打印,区域打印的两种实现方法总结

2023-09-02 19:18| 来源: 网络整理| 查看: 265

在开发中,有时需要实现页面的局部打印功能,不打印页面上不需要的区域,

例如页面:

aaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbb ccccccccccccccccccc ddddddddddddddddddddd doPrint

dddddddddd需要打印,两种实现方法如下:

方法一、替换body

代码:

function print(){ var bdhtml = window.document.body.innerHTML; var prnhtml = $("#toPrint").html(); window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; };

因为window.print()这个方法只能打印全部body内容,所以这个方法大体来讲,分四个步骤:

1.获取原有body里面的所有内容 var bdhtml = window.document.body.innerHTML

2.获取待打印内容 var prnhtml = document.getElementById(“toPrint”);

3.将页面body替换为待打印内容并进行打印 window.document.body.innerHTML = prnhtml;

window.print();

4.打印完成,恢复原来页面body window.document.body.innerHTML = bdhtml;

总结:

**优点:这个方法不依赖于任何第三方插件,响应速度快 缺点:1、替换过程会改变原页面显示效果,影响用户体验。 2、body来回替换的过程中,如果原页面中有较为复杂的js渲染效果,可能会受影响

方法二:jquery.PrintArea.js局部打印 步骤:

1、引入js

因为PrintArea依赖于jquery库,所以一定先引jquery。 2.打印 $("#toPrint").printArea();

总结:

缺点:依赖于第三方插件 优点:对原页面不会有任何影响,并且逻辑简单。

ps: PrintArea还提供一些打印时的附加优化功能,例如: 1.mode:模式,当点击打印按钮时触发模式,默认为iframe,当设置为popup则会新开一个窗口页面打印。 2.popTitle:设置新开窗口的标题,默认为空。 3.popClose:完成打印后是否关闭窗口,默认为false。 具体可参考官方API



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有