从页面禁用浏览器打印选项(页眉、页脚、边距)? [英] Disabling browser print options (headers, footers, margins) from page?

查看：27 发布时间：2021/12/1 16:43:54 javascript html css browser printing

本文介绍了从页面禁用浏览器打印选项(页眉、页脚、边距)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 SO 和其他几个网站上看到过以多种不同方式提出的这个问题，但其中大多数要么过于具体，要么已经过时.我希望有人能在这里提供一个明确的答案，而不是迎合猜测.

当有人在浏览器中打印时，有没有办法使用 CSS 或 javascript 更改默认打印机设置?当然，从他们的浏览器打印"是指某种形式的 HTML，而不是 PDF 或其他一些依赖插件的 mime 类型.

请注意:

如果某些浏览器提供此功能而其他浏览器不提供(或者如果您只知道如何为某些浏览器执行此操作)，我欢迎特定于浏览器的解决方案.

同样，如果您知道某个主流浏览器对 EVER 执行此操作有特定限制，这也很有帮助，但我们将不胜感激.(当 XYZ 在过去三年中对上述政策进行了重大更改时，简单地说这违反了 XYZ 的安全政策"并不能令人信服.

最后，当我说更改默认打印设置"时，我的意思不是永远，只是针对我的页面，我特指打印页边距、页眉和页脚.

我非常清楚 CSS 提供了更改页面方向和页边距的选项.许多斗争之一是使用 Firefox.如果我将页边距设置为 1 英寸，它会将其添加到它已经放置到位的半英寸.

我非常希望减少客户网站上 PDF 的使用，但他们主要担心的是对演示文稿的侵犯(以及缺乏可靠性).

解决方案

CSS 标准支持一些高级格式.CSS 中有一个 @page 指令，它启用一些仅适用于分页媒体(如纸张)的格式.参见 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

缺点是不同浏览器的行为不一致.Safari 仍然完全不支持设置打印机页边距，但所有其他主要浏览器现在都支持.

使用 @page 指令，您可以指定页面的打印机边距(这与 HTML 元素的普通 CSS 边距不同):

<头><title>打印测试</title><style type="text/css";媒体=打印">@页{尺寸:自动；/* auto 是初始值 */边距:0mm；/* 这会影响打印机设置中的边距 */}html{背景色:#FFFFFF；边距:0px；/* 这会在发送到打印机之前影响 html 上的边距 */}身体{边框:纯 1px 蓝色；边距:10mm 15mm 10mm 15mm；/* 你想要的内容边距 */}</风格><身体><div>顶线</div><div>第 2 行</div>

<块引用>

注意我们这里基本禁用了页面特定的边距，以达到去除页眉页脚的效果，所以我们在body上设置的边距不会在分页符中使用(如康拉德评论)这意味着它只会如果打印的内容只有一页，则可以正常工作.

这不适用于 Firefox 3.6、IE 7、Safari 5.1.7 或 Google Chrome 4.1.

设置@page 边距在 IE 8、Opera 10、Google Chrome 21 和 Firefox 19 中确实有效强>.
尽管在这些浏览器中为您的内容正确设置了页边距，但在尝试解决页眉/页脚隐藏问题时，这种行为并不理想.

这是它在不同浏览器中的表现:

在 Internet Explorer 中，此打印的设置中边距实际上设置为 0mm，如果您进行预览，则默认为 0mm，但用户可以在预览.
您将看到页面内容实际上定位正确，但浏览器打印页眉和页脚显示为非透明背景，因此有效地隐藏了该位置的页面内容.
在 Firefox 较新的版本中，它定位是正确的，但是页眉/页脚文本和内容文本都显示出来，所以它看起来像一个糟糕的组合浏览器标题文本和您的页面内容.
在Opera中，在标准css中使用不透明背景时，页面内容隐藏页眉，页眉/页脚位置与内容冲突.相当不错，但如果将边距设置为一个导致标题部分可见的小值，则看起来很奇怪.另外页边距设置不正确.
在 Chrome 较新版本中，如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突，则浏览器页眉和页脚将被隐藏.在我看来，这正是它应该表现的方式.

所以结论是 Chrome 在隐藏页眉/页脚方面有最好的实现.

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to speculation.

Is there a way, either with CSS or javascript, to change the default printer settings when someone prints within their browser? And of course by "prints from their browser" I mean some form of HTML, not PDF or some other plug-in reliant mime-type.

Please note:

If some browsers offer this and others don't (or if you only know how to do it for some browsers) I welcome browser-specific solutions.

Similarly, if you know of a mainstream browser that has specific restrictions against EVER doing this, that is also helpful, but some fairly up-to-date documentation would be appreciated. (simply saying "that goes against XYZ's security policy" isn't very convincing when XYZ has made significant changes in said policy in the last three years).

Finally, when I say "change default print settings" I don't mean forever, just for my page, and I am referring specifically to print margins, headers, and footers.

I am very aware that CSS offers the option of changing the page orientation as well as the page margins. One of the many struggles is with Firefox. If I set the page margins to 1 inch, it ADDS this to the half inch it already puts into place.

I very much want to reduce the usage of PDFs on my client's site, but the infringement on presentation (as well as the lack of reliability) are their main concern.

解决方案

The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

Downside is that behavior in different browsers is not consistent. Safari still does not support setting printer page margin at all, but all the other major browsers now support it.

With the @page directive, you can specify printer margin of the page (which is not the same as normal CSS margin of an HTML element):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

This does not work in Firefox 3.6, IE 7, Safari 5.1.7 or Google Chrome 4.1.

Setting the @page margin does have effect in IE 8, Opera 10, Google Chrome 21 and Firefox 19.
Although the page margins are set correctly for your content in these browsers, the behavior is not ideal in trying to solve the hiding of the header/footer.

This is how it behaves in different browsers:

In Internet Explorer, the margin is actually set to 0mm in the settings for this printing, and if you do Preview you will get 0mm as default, but the user can change it in the preview.
You will see that the page content actually are positioned correctly, but the browser print header and footer is shown with non-transparent background, and so effectively hiding the page content at that position.
In Firefox newer versions, it is positioned correctly, but both the header/footer text and content text is displayed, so it looks like a bad mix of browser header text and your page content.
In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.
In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

这篇关于从页面禁用浏览器打印选项(页眉、页脚、边距)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

从页面禁用浏览器打印选项(页眉、页脚、边距)? [英] Disabling browser print options (headers, footers, margins) from page?

问题描述

这是它在不同浏览器中的表现:

This is how it behaves in different browsers:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

从页面禁用浏览器打印选项(页眉、页脚、边距)? [英] Disabling browser print options (headers, footers, margins) from page?

问题描述

这是它在不同浏览器中的表现:

This is how it behaves in different browsers:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭