js实现自定义打印区域

最新推荐文章于 2021-12-07 11:41:25 发布

原创最新推荐文章于 2021-12-07 11:41:25 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #打印 #自定义

js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种实现网页局部打印的方法，通过替换页面内容为指定区域再进行打印，最后还原页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 window.print() 方法可以实现页面的打印功能，但是这个方法打印的是当前整个页面。如果要想打印某一指定区域该怎么实现呢？

思路可以是：用想要打印的区域来替换页面内容。

获取需要打印的区域。
保存原页面body的内容。
用需要打印的区域替换页面body内容。
打印。
还原页面。

var newStr = document.getElementsByClassName('printInnerHtml')[0].innerHTML; //获取打印内容
var pageStr = document.body.innerHTML; //保存原页面
document.body.innerHTML = newStr; //用打印区域替换原页面
window.print(); //打印
document.body.innerHTML = pageStr; //还原页面

如果打印区域是好几块内容的时候，可以使用字符串拼接。

var newStr = document.getElementsByClassName('printInnerHtml')[0].innerHTML; //获取打印内容

newStr += document.getElementsByClassName('printInnerHtml2')[0].innerHTML; //字符串拼接 需要打印的内容

var pageStr = document.body.innerHTML; //保存原页面
document.body.innerHTML = newStr; //用打印区域替换原页面
window.print(); //打印
document.body.innerHTML = pageStr; //还原页面