首页window.print()打印时，如何自定义页眉/页脚、页边距

window.print()打印时，如何自定义页眉/页脚、页边距

时间: 2024-10-23 11:10:49 浏览: 83

在JavaScript中，`window.print()`函数直接触发浏览器的默认打印功能，它并不支持像Word文档那样的完全自定义打印设置，包括页眉、页脚和页边距。然而，如果你想在打印预览阶段调整这些设置，你可以通过HTML5的`print`媒体查询来间接影响。例如，你可以在CSS中为`.print-only`选择器定义样式，这些样式会在用户点击“打印”按钮后生效： ```css .print-only { /* 自定义页眉 */ @page :first { size: auto; margin: 0 auto; /* 可调整顶部和底部边距 */ padding-top: 1cm; /* 添加页眉高度 */ } /* 或者单独为页眉添加样式 */ header { position: fixed; top: 0; left: 0; right: 0; background-color: white; /* 添加页眉内容 */ } /* 自定义页脚 */ footer { position: fixed; bottom: 0; left: 0; right: 0; /* 添加页脚内容 */ } /* 可调整其他页面边距 */ body { margin: 1cm; /* 普通页面的上下边距 */ page-break-after: always; /* 确保每个新页都有页眉和页脚 */ } } ``` 然后在需要的地方应用这个类，如`<body class="print-only">...</body>`。请注意，这仅限于提供基本的布局控制，对于复杂的设计或定制需求，还是推荐在用户的电脑上安装额外的打印插件或借助后端生成PDF文件。

阅读全文