js实现页面打印功能实例代码(附去页眉页脚功能代码)

最新推荐文章于 2020-12-18 20:39:01 发布

iteye_3156

最新推荐文章于 2020-12-18 20:39:01 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏：前台文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_3156/article/details/82617941

前台专栏收录该内容

76 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML结合的方式实现网页内容的预览及打印功能。通过定义打印区域，仅将指定的内容呈现给打印机，同时保持页面其余部分的正常显示。

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

<html> 
<head></head> 
<style type="text/css" media="screen"> 
@media print{ 
.print {display:block;} 
.notPrint {display:none;} 
} 
</style> 
<script language="javascript"> 
function preview() 
{ 
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(); 
} 
</script> 
<body> 
<form id="WebForm1" method="post" > 
<center>本部分以上不被打印</center> 
<!--startprint--> 
<div align="center"> 
<asp:DataGrid id="dgShow" runat="server"> 
<!--省略部分代码--> 
</asp:DataGrid> 
<table> 
<tr><td>打印打印打印打印打印打印打印打印</td></tr> 
</table> 
</div> 
<!--endprint--> 
<center>本部分以下不被打印</center> 
<div align="center"> 
<input type="button" name="print" value="预览并打印" onclick="preview()"> 
</div> 
<style> @media Print { .Noprn { DISPLAY: none }} 
</style> 
<p class="Noprn">不打印</p> 
<table id="datagrid"> 
<tr> 
<td>打印</td> 
</tr> 
</table> 
<input class="Noprn" type="button" onclick="window.print()" value="print"> 
</form> 
</body> 
</html>

================================