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

2024-05-21 05:08:26

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

例如页面：

<div>aaaaaaaaaaaaaaaaaaa</div><div>bbbbbbbbbbbbbbbbbbb</div><div>ccccccccccccccccccc</div><div id="toPrint"style="color:red">ddddddddddddddddddddd</div><button  onclick="print()"> doPrint </button></body>

dddddddddd需要打印，两种实现方法如下：

方法一、替换body

代码：

<script type="text/javascript">function print(){var bdhtml = window.document.body.innerHTML;var prnhtml = $("#toPrint").html();window.document.body.innerHTML = prnhtml;window.print();window.document.body.innerHTML = bdhtml;};</script>

因为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

HTML局部打印，区域打印的两种实现方法总结相关推荐

利用iframe实现局部打印(区域打印)
利用iframe实现局部打印(区域打印) <template><div id="test-page"><div ...
day030进程的两种创建方法，验证进程的空间隔离，join等待子进程
本节内容: 1.操作系统的简单介绍 2.进程的两种创建方法 3.进程之间是空间隔离的, 参考文章: 一.操作系统的简单介绍 1.操作系统简单介绍操作系统就是一个协调.管理和控制计算机硬件资源和软件资 ...
Java动态代理的两种实现方法：JDK动态代理和CGLIB动态代理
Java动态代理的两种实现方法:JDK动态代理和CGLIB动态代理代理模式 JDK动态代理 CGLIB动态代理代理模式代理模式是23种设计模式的一种,指一个对象A通过持有另一个对象B,可以具有B ...
OCR图片转文字两种python方法实现
图片转文字的两种处理方法: 一种是文字识别工作都需要在网络侧完成的方式,我们称为在线识别: 另一种是不需要互联网功能的,我们称作离线识别. 在线识别方式先看第一种,在线识别的方式.在线识别方式最大的 ...
linux shell语法检查或者查看shell脚本执行过程的参数介绍及两种使用方法
shell语法检查或者查看shell脚本执行过程的参数介绍及两种使用方法一.常用参数概述: set -x 与 set +x 在liunx脚本中可用set -x就可有详细的日志输出,省的老是要echo ...
html文件打开系统错误,win7打开word提示“无法打开文件Normal因为内容有错误”的两种解决方法...
win7系统打开Word的时候,弹出提示"无法打开文件Normal.dotm,因为内容有错误",为什么会出现错误提示呢?小编就按照错误提示寻找文件,最后发现是Word自动生成的模板 ...
两种随机数生成方法——反函数法和舍选法
两种随机数生成方法--反函数法和舍选法我们知道,对于均匀分布的随机数,我们可以使用随机数生成器类似的方法生成均匀分布的随机数.包括线性同余发生器,FSR发生器等.对于非均匀分布的随机数,对于连续型随 ...
打游戏计算机内存不足,电脑玩cf游戏内存不足的两种解决方法
电脑出现内存不足是一种较为常见的电脑故障,常见于运行大型游戏的时候发生此类故障.最近,一些小伙伴说电脑玩cf游戏内存不足,怎么办?cf穿越火线是一款第一人称射击游戏的网络游戏,如果想要运行cf游戏,不 ...
代码的两种命名方法：驼峰命名、匈牙利命名（优缺点）
代码的两种命名方法:驼峰命名.匈牙利命名(优缺点) 一.骆驼命名法: 小驼峰法(camel方法)变量一般用小驼峰法标识. 第一个单词以小写字母开始:第二个单词的首字母大写或每一个单词的首字母都采用大写 ...

最新文章

热门文章