CSS 如何禁用页面中的浏览器打印选项(页眉、页脚、页边距)

您所在的位置:网站首页 火狐浏览器打印页面设置没有方向设置了 CSS 如何禁用页面中的浏览器打印选项(页眉、页脚、页边距)

CSS 如何禁用页面中的浏览器打印选项(页眉、页脚、页边距)

2024-07-09 18:32| 来源: 网络整理| 查看: 265

CSS 如何禁用页面中的浏览器打印选项(页眉、页脚、页边距)

我们可以仅仅通过CSS的帮助来控制打印预览页面的页眉、页脚和页边距,甚至可以实现页面媒体的理想布局和方向。我们将使用@page指令来实现我们的结果。

在浏览器中预览一个打印页面时,我们会看到一些额外的页面信息,如页面标题、页面预览日期和时间,以及预览中的页码,这些都存在于页面的页眉和页脚。我们还可以看到一些应用于页面预览媒体的额外边距。

语法 @media print { @page { /* Desired CSS */ } } 解释

在这种方法中,我们将在@media打印规则内使用@page at-rule(或指令),它是由CSS提供的,允许我们在页面媒体上应用格式化,这包括在屏幕上可见的页面、纸张等。

在@page指令的帮助下,我们可以控制打印页面的布局、设计、边距、方向,甚至是特定页面的设计。该指令被广泛用于设计离散的(paged)媒体。

分页媒体与通常的连续媒体(如网站)的不同之处在于,在分页媒体中,如果内容溢出,就会被分割成不同的页面。我们仍然可以借助@page指令的伪类来控制页面的布局。

例子1

在这个例子中,我们将通过在@paged指令中设置margin为 “0 “来删除页眉、页脚以及在分页媒体中可见的额外空白。

How to disable browser print options (headers, footers, margins) from the page with CSS? @page { margin: 0; }

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem, rerum consequatur tempore dignissimos nostrum officiis nam minima omnis

按command + p(在mac中)或ctrl + p(在windows、Linux中)查看打印预览屏幕。

例子2

在这个例子中,我们将从分页媒体中删除浏览器的打印选项,但会在分页媒体屏幕中为正文元素添加边距。

How to disable browser print options (headers, footers, margins) from the page with CSS? @media print { @page { margin: 0; } body { margin: 2rem; } }

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem, rerum consequatur tempore dignissimos nostrum officiis nam minima omnis

按command + p(在mac)或ctrl + p(在windows、Linux)看到打印预览屏幕。

总结

在这篇文章中,我们了解了@paged CSS指令,以及如何使用这个指令让我们只用CSS就可以从打印预览中删除/禁用浏览器的打印选项。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3