在前端开发中，我们通常需要控制网页的输出效果。而打印是其中一个重要的输出形式。然而，有时候我们希望禁用浏览器默认的打印选项，例如页眉、页脚、页边距等。这篇文章将会介绍如何使用 CSS 和 JavaScript 来达到禁用浏览器默认打印选项的目的。
禁用页眉和页脚
在打印页面时，浏览器通常会自动添加页眉和页脚，其中包含了一些基本信息，例如页面标题、时间戳等。如果我们希望禁用浏览器默认的页眉和页脚，可以通过设置 @page 属性来实现，示例代码如下：
@media print {
@page {
margin: 0;
size: auto; /* 默认为 A4 大小 */
margin-top: 0cm;
margin-bottom: 0cm;
}
}上述代码将在打印时应用，将页面边距和页面大小都设为默认值，并将页眉和页脚的上下边距都设为 0，从而实现了禁用页眉和页脚的目的。
禁用页边距
除了禁用页眉和页脚外，我们有时候也需要禁用浏览器默认的页边距。在 CSS 中，我们可以使用 @page 属性来设置页面边距。示例代码如下：
-- -------------------- ---- -------
------ ----- -
----- -
------- --
----- ----- -- --- -- -- --
-
---- -
------- -- -- ----------- ---- --
-
-上述代码将在打印时应用，将页面边距和页面大小都设为默认值，并将 body 元素的边距设为 0（或者设为一个负值，例如 -1cm），从而实现了禁用页边距的目的。
结语
通过使用 CSS 和 JavaScript，我们可以很容易地实现禁用浏览器默认打印选项的目的。在实际开发中，我们可以根据具体需求来灵活运用这些技巧，以达到理想的打印效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9596
