javascript - 使用浏览器打印时如何修改浏览器添加的页眉和页脚

Question

我想知道是否可以(在任何浏览器中)修改浏览器在打印时添加的页眉和页脚。我知道你可以通过调整@页边距来防止出现。但我希望能够更改页眉和页脚的文本。

最重要的是能够将字符串从类似基于网络技术的 Javascript 传递到浏览器(或浏览器的扩展)，这将调整页眉和页脚的值。

我知道 Firefox 允许将自定义文本添加为​​页眉和页脚，但如果有扩展使用 JS 或类似的方法传递字符串。

Answer 1

您可以使用print media style sheets 。将您想要应用于打印配置文件的所有规则放在一个换行中，例如:

@media print {
   .header, .footer {
       display:none;
   }
}

片段

body {
  font-family:"Open Sans", sans-serif;
}
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.header, .footer {
   display:table;
   width:100%;
   background:#333;
   color:#fff;
   text-align:center;
   text-transform:uppercase;
   padding:10px;
}
.main {
   padding:10px;
   min-height:100px;
}

@media print {
   .header, .footer {
      display:none;
   }
}

<header class="header">Header</header>
<main class="main">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed ornare sapien. Proin non pulvinar purus. Suspendisse non nulla eu est viverra dapibus at nec turpis. Maecenas vel ultrices massa. Vestibulum mauris felis, aliquam in tincidunt vel, laoreet eu arcu. Cras commodo non metus a scelerisque. Praesent rutrum at ipsum at mollis. Nullam interdum nulla ex, id malesuada nisl eleifend eget. Donec enim justo, sollicitudin quis varius sit amet, consequat in nisl.</p>
</main>
<footer class="footer">Footer</footer>