如何移除HTML打印时的地址、页码与日期？

嘿，我懂你现在的困扰——已经用CSS指定了要打印的区域，但浏览器自带的页码、网页地址、日期这些默认页眉页脚还是会出现在打印件里对吧？这些元素是浏览器自己渲染的，不在你的页面DOM结构中，所以得用专门的CSS规则来移除它们。

你可以修改现有的打印样式，添加针对@page的规则，具体代码如下：

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">
  #SCREEN_VIEW_CONTAINER{ 
    display: none; 
  } 
  .other_print_layout{ 
    background-color:#FFF; 
  }

  /* 关键：移除浏览器默认页眉页脚 */
  @page {
    size: auto; /* 自动适配纸张尺寸 */
    margin: 0mm; /* 将页边距设为0，让默认页眉页脚失去显示空间 */
  }

  /* 给打印内容添加内边距，避免内容紧贴纸张边缘 */
  #PRINT_VIEW {
    padding: 20mm;
  }
</style>

<div id="SCREEN_VIEW_CONTAINER">
  THIS PART WILL NOT BE PRINTED
</div>
<br />
<br />
<div id="PRINT_VIEW">
  THIS PART WILL BE PRINTED
</div>

为什么这样有效？ #

• 浏览器的默认页眉页脚是放在页面的页边距区域里的，把@page的margin设为0，就相当于把这个区域彻底去掉，那些默认元素自然就没地方显示了。
• 给#PRINT_VIEW加内边距是为了让打印内容不会紧贴纸张边缘，保证排版美观。

如果遇到个别浏览器（比如旧版Chrome或Firefox）还有残留，再补充这条规则：

@media print {
  body {
    margin: 0;
  }
}

这样调整后，打印出来的内容就只会是你指定的#PRINT_VIEW区域，那些烦人的默认页眉页脚就消失啦！

内容的提问来源于stack exchange，提问作者Mosarof Hossain