如何用js实现打印当前页面隐藏的内容？

最新推荐文章于 2025-08-15 15:12:48 发布

原创最新推荐文章于 2025-08-15 15:12:48 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML

本文介绍了如何使用JavaScript实现打印当前页面包括隐藏内容的功能，并且详细讲解了如何通过设置去掉打印时的页眉和页脚。通过`print()`方法调用，结合不同浏览器的测试，确保在Win10环境下IE11、Chrome、Firefox、360和Edge等浏览器中都能成功实现无页眉页脚的打印效果。

js 客户端打印页面并且去掉页眉、页脚的实例**

print() 方法用于打印当前窗口的内容，支持部分或者整个网页打印。

调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。

win10下测试ie11、chrome、firefox、360、edge 都可以成功去掉页眉页脚；

<!DOCTYPE html>
<html>
<head>
 <title>打印</title>
 <meta charset="utf-8">
 <style>
  .printBox {
   width: 300px;
   height: 300px;
   border: 1px solid blue;
  }
 </style>
 <!-- 打印的样式-->
 <style media="print">
  @page {
   size: auto;
   margin: 0mm;
  }
 </style>
</head>
 
<body>
<div class="printBox">
 this is content!!!<br>
 点击按钮打印
</div>
<button onclick='print_page()'>打印</button>
</body>
 
<script type="text/javascript">
 function print_page() {
  if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
   remove_ie_header_and_footer();
  }
  window.print();
 }
 
 function remove_ie_header_and_footer() {
  var hkey_path;
  hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
  try {
   var RegWsh = new ActiveXObject("WScript.Shell");
   RegWsh.RegWrite(hkey_path + "header", "");
   RegWsh.RegWrite(hkey_path + "footer", "");
  } catch (e) {
  }
 }
</script>
</html>

或者
打印的时候有时间和请求的网址，客户不希望有这样的信息，所以再head中添加

<style type="text/css">

        @page { margin: 0; }

</style>

设置前效果
在这里插入图片描述
设置后效果

标签

#js #html