window.print打印指定html元素中的内容

时间:2024-01-17 19:03:32

通常有些时候我们项目过程中使用到打印功能,而wndow.print便是系统里提供的一个函数。

但是直接使用的话,它打印的将是整个页面的所有元素,而有些时候我们又只需要打印部分内容。

<body>
<div id="content" style="width: 500px; height: 500px; border: 1px solid #ff6a00;">

首艘国产航母下水、国产大型客机C919成功首飞、“天眼”探空、“蛟龙”入海、“墨子号”发射升空……五年间,一系列“国之重器”让世界刮目相看。这些激动人心的场景,让中国人的信心和梦想被不断点燃。


而改革发展稳定、内政外交国防、治党治国治军等各方面,在总书记的领导下,取得了历史性成就和变革。五年来,党*推出一系列重大战略举措,出台一系列重大方针政策,推进一系列重大工作,解决了许多长期想解决而没有解决的难题,办成了许多过去想办而没有办成的大事。


“环顾世界,没有一个国家能像当今中国这样,以一种说到做到、只争朝夕的方式推进改革。”对这场变革,有外媒如此评价。


认清历史方位,才能看清前行的方向。近代以来,从落后挨打到新中国成立“站起来”、改革开放“富起来”再到“强起来”,我们经历了很多大风大浪。如今,民族复兴的接力棒交到了我们这一代人的手上。

</div>
<input type="button" id="print" value="打印" />
</body>

如以上html代码,有一个div和一个input,而我只需要打印div。

根据其原理,window.print()打印的是body里的所有内容,那么只需要在执行打印功能的时候在body里只保留要打印的内容,就可以实现了。

代码如下:

    <script>
$(function () {
//给打印按钮添加点击事件
$("body").on("click", "#print", function () { //获取要打印部分的html
var html = $("#content").prop("outerHTML"); //获取所有要body中的内容,作为备份
var oldhtml = $("body").prop("outerHTML"); //将打印的html赋值给body
$("body").html(html); //打印
window.print(); //同时把原来的html还原
$("body").html(oldhtml);
})
})
</script>

调用完印功能以后,再把原来body里应该的html给还原。

window.print打印指定html元素中的内容

window.print打印指定html元素中的内容