js 打印页面局部区域(指定位置)

1.情景展示

在浏览器的网页上,我们可以通过window.print()实现网页的打印功能。

但是,该方法打印的是当前网页上面所有展示的内容,如何只打印指定区域内容呢?

如下图所示,只将送检申请单所在区域打印出来,其它位置不用管,如何实现?

2.具体分析

window.print()打印的是全部内容,那我们就可以:

获取到指定区域内容,然后将该区域内容作为整个页面(覆盖掉当前页),调用打印功能。

最后,将原网页内容还原就可以啦。

3.解决方案

//打印
function printPreview() {
	//先获取当前页的html代码
	var body = document.body.innerHTML;
	//需要打印的页面部分
	document.body.innerHTML = document.getElementById("gridPrintView").innerHTML;
	window.print();
	window.close();
	//打印完成之后,还原界面
	document.body.innerHTML = body;
}

在页面上定义一个打印按钮,点击打印,会弹出浏览器自带的打印预览界面。

如上图所示,除了我们要打印的内容外,头部和尾部多了些内容,如何去掉?

把打印选项当中,默认勾选的“页眉和页脚”去掉就可以啦。

我们可以选择使用哪个打印机,纸张大小等。

最后,点击“打印”按钮,完成打印。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

posted @ 2023-05-06 19:16  Marydon  阅读(2898)  评论(0编辑  收藏  举报