没有插件的打印功能

最新推荐文章于 2025-06-27 15:20:04 发布

灬ManongLai

最新推荐文章于 2025-06-27 15:20:04 发布

阅读量379

点赞数

分类专栏： html+css javascript 文章标签：整体打印局部打印过滤打印

javascript 同时被 2 个专栏收录

59 篇文章

订阅专栏

html+css

23 篇文章

订阅专栏

本文介绍使用JavaScript实现网页打印的方法，包括整体打印及指定区域打印。详细解释了如何通过注释标记来限定打印范围，并展示了如何利用CSS媒体查询排除不希望打印的内容。

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

我们在网页开发过程中经常会有打印页面的需求，通过JS来实现的方法有很多，这里我做了一个整理，供大家参考。

方式一：window.print()

整体打印

<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>

现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置

局部打印

<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">  
	这里是需要打印的内容    .....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>

然后，在点击事件中添加如下代码

function doPrint() {       
	bdhtml=window.document.body.innerHTML;       
	sprnstr="<!--startprint-->";       
	eprnstr="<!--endprint-->";       
	prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);    
	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));       	
	window.document.body.innerHTML=prnhtml;      
	window.print();   
}

过滤打印区域的内容

<!--startprint-->
<div class="content">  
	<button class="noprint">预览</button>  
	<button class="noprint">打印</button>   
	这里是需要打印的内容    .....  
</div>
<!--endprint-->

上面的预览和打印按钮不希望打印，如果要过滤的话可以做下面的样式设置

<style type="text/css">  @media print {    .noprint{      display: none;    }  }</style>

<style type="text/css" media="print">  .noprint{    display: none;  }</style>

两种写法任选其一