首页window.print如何设置浏览器默认页眉页脚

window.print如何设置浏览器默认页眉页脚

时间: 2024-10-24 20:10:26 浏览: 10

`window.print()` 方法在JavaScript中用于直接触发浏览器的打印功能，它本身并不支持设置特定的页眉和页脚。然而，如果你想在用户通过`window.print()`调用打印时自定义页面内容，包括页眉和页脚，你需要借助CSS和HTML来实现这个功能。在HTML中，你可以创建一个`<iframe>`标签，并将需要打印的内容放入其中。然后在CSS中，你可以使用 `@page` 规则来设置页眉和页脚： ```html <!DOCTYPE html> <html lang="en"> <head> <style> /* 设置页眉 */ @media print { @page { margin: 0; size: A4; /* 可选纸张大小 */ } header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; /* 根据实际需求调整高度 */ background-color: #f0f0f0; /* 颜色 */ font-size: 16px; /* 字体大小 */ } /* 设置页脚 */ footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; /* 根据实际需求调整高度 */ background-color: #f0f0f0; text-align: center; } } iframe { /* 其他样式和内容 */ } </style> </head> <body> <div class="header">这是一段固定的页眉文本</div> <iframe src="printable-content.html" style="height: 800px;"></iframe> <div class="footer">这是一段固定的页脚文本</div> </body> </html> ``` 在这个例子中，`.header` 和 `.footer` 分别代表页眉和页脚区域。当你调用 `window.print()` 时，这段自定义的HTML和CSS会随文档一起被打印。请注意，这种方法只适用于用户的常规打印操作，如果用户选择“保存为PDF”或者其他非默认打印选项，那么可能会失去对页眉页脚的控制。另外，不是所有浏览器都完全支持CSS打印样式，因此最好进行跨浏览器测试。

阅读全文