从页面禁用浏览器打印选项（页眉、页脚、页边距）？
[英]Disabling browser print options (headers, footers, margins) from page?
问题描述
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.
我在 SO 和其他几个网站上看到过以几种不同的方式提出的这个问题，但其中大多数要么太具体，要么过时。 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?当有人在浏览器中打印时，有没有办法使用 CSS 或 javascript 更改默认打印机设置？ And of course by "prints from their browser" I mean some form of HTML, not PDF or some other plug-in reliant mime-type.当然，“从他们的浏览器打印”是指某种形式的 HTML，而不是 PDF 或其他一些依赖插件的 mime 类型。
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.同样，如果您知道某个主流浏览器对 EVER 执行此操作有特定限制，这也很有帮助，但我们将不胜感激。 (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). （当 XYZ 在过去三年中对上述政策进行了重大更改时，简单地说“这违反了 XYZ 的安全政策”并不是很有说服力）。
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.我非常清楚 CSS 提供了更改页面方向和页边距的选项。 One of the many struggles is with Firefox.许多困难之一是使用 Firefox。 If I set the page margins to 1 inch, it ADDS this to the half inch it already puts into place.如果我将页边距设置为 1 英寸，它会将其添加到它已经放置到位的半英寸。
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.我非常想减少我客户网站上 PDF 的使用，但对演示文稿的侵权（以及缺乏可靠性）是他们主要关注的问题。
9 个解决方案
解决方案1
201 已采纳 2010-05-06 11:01:25
The CSS standard enables some advanced formatting. CSS 标准支持一些高级格式。 There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). CSS 中有一个@page指令，它启用一些仅适用于分页媒体（如纸张）的格式。 See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .参见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. Safari 仍然根本不支持设置打印机页边距，但所有其他主要浏览器现在都支持它。
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):使用@page指令，您可以指定页面的打印机边距（这与 HTML 元素的普通 CSS 边距不同）：
<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 .这在Firefox 3.6 、 IE 7 、 Safari 5.1.7或Google Chrome 4.1 中不起作用。
Setting the @page margin does have effect in IE 8 , Opera 10 , Google Chrome 21 and Firefox 19 .设置 @page margin 在IE 8 、 Opera 10 、 Google Chrome 21和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.
在Internet Explorer 中，此打印的设置中的边距实际上设置为 0mm，如果您进行预览，则默认为 0mm，但用户可以在预览中更改它。
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.
在Firefox较新版本中，它的位置正确，但页眉/页脚文本和内容文本都会显示，因此它看起来像是浏览器页眉文本和页面内容的错误组合。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.
在Opera 中，在标准 css 中使用非透明背景时，页面内容会隐藏页眉，并且页眉/页脚位置与内容冲突。 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.
在Chrome较新版本中，如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突，则浏览器页眉和页脚将被隐藏。 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.所以结论是Chrome在隐藏页眉/页脚方面有最好的实现。
解决方案2
86 2014-05-21 08:40:25
Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater任何最新版本的 Chrome 和 Opera，以及Firefox 48 alpha 1 及更高版本
You can set the page margin to a size that's too small to contain the text in order to disable this (borrowing from awe 's answer):您可以将页边距设置为太小而无法包含文本的大小以禁用此功能（借用awe的答案）：
@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 */ }
<ol> <li> <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a> </li> <li> <a href="javascript:print()">Print</a> </li> </ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>
For versions of Firefox up to 48 alpha 1适用于最高48 alpha 1 的 Firefox 版本
You can add a mozNoMarginBoxes attribute to the <html> tag to prevent the URL, page numbers and other things Firefox adds to the page margin from being printed.您可以向<html>标记添加mozNoMarginBoxes属性，以防止打印 Firefox 添加到页边距的 URL、页码和其他内容。
It is working in Firefox 29 and onwards.它适用于 Firefox 29 及更高版本。 You can see a screen shot of the difference here , orsee here for a live example. 您可以在此处查看差异的屏幕截图，或在此处查看现场示例。
Note that the mozDisallowSelectionPrint attribute in the example is not required to remove the text from the margins;注意， mozDisallowSelectionPrint在示例属性不需要除去从边缘的文本; see What does the mozdisallowselectionprint attribute in PDF.js do?请参阅PDF.js 中的 mozdisallowselectionprint 属性有什么作用？ . .
Other browsers其它浏览器
Unfortunately, there seems to be no way to resolve this problem in Internet Explorer, so you'll have to resort to PDF or ask users to disable margin texts.不幸的是，在 Internet Explorer 中似乎没有办法解决这个问题，因此您必须求助于 PDF 或要求用户禁用边距文本。
The same goes for Safari; Safari 也是如此； according to a comment by @Luiz Perez , the most recent versions of Safari (8, 9.1 and 10) still do not support @page for suppressing margin texts.根据@Luiz Perez的评论，最新版本的 Safari（ @page和 10）仍然不支持@page来抑制边距文本。
I can't find anything on Edge and I don't have a Windows 10 installation available to test.我在 Edge 上找不到任何东西，而且我没有可供测试的 Windows 10 安装。
解决方案3
22 2012-03-28 03:38:57
As @Awe had said above, this is the solution, that is confirmed to work in Chrome!!正如@Awe 上面所说，这是解决方案，已确认可在 Chrome 中使用！！
Just make sure this is INSIDE the head tags:只要确保这是在头部标签内：
<head>
<style media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* this affects the margin on the content before sending to printer */
}
</style>
</head>
解决方案4
16 2011-07-07 17:10:54
I have a similar request from a client who wants to have the header, page numbers, and html footer removed.我有一个来自希望删除页眉、页码和 html 页脚的客户的类似请求。 In this case, the client is presenting an HTML page that can double as a formal certificate.在这种情况下，客户端呈现的 HTML 页面可以兼作正式证书。 The added URL, page, and, header, are irrelevant and lead to a less-than-pleasing final product.添加的 URL、页面和标题是无关紧要的，并导致最终产品不尽人意。 In some ways, it just looks cheap.在某些方面，它看起来很便宜。
Media=Print has not been able to disable these browser defaults. Media=Print 无法禁用这些浏览器默认设置。 The only workaround is to tell the user to click the "Gear" button and toggle those items on/off.唯一的解决方法是告诉用户单击“齿轮”按钮并打开/关闭这些项目。 Seriously, I had no idea I could do that for 20 years (and we think the typical user will have a clue to click the toggle button?).说真的，我不知道我可以这样做 20 年（我们认为典型用户会知道单击切换按钮的线索？）。
If CSS supports Media=Print, it should support the ability to control the entire end-user print experience.如果 CSS 支持 Media=Print，它应该支持控制整个最终用户打印体验的能力。 I appreciate that the browsers provide the added fields, but, why not allow CSS to control the overall print experience-if that is what's desired.我很欣赏浏览器提供了添加的字段，但是，为什么不让 CSS 控制整体打印体验——如果这是所需要的。 A 90% solution could be 100% with three more fields!一个 90% 的解决方案可能是另外三个字段 100%！ A simple:一个简单的：
#BrowserPrintDefaults{display:none}
would suffice.就足够了。
Again, it's not a matter whether or not the end-user wants to print it out or not (maybe your client is very private and doesn't want printed URLs floating around. Or maybe a executive team uses a private collaboration sites?).同样，最终用户是否想要打印它并不重要（也许您的客户非常私密，不希望打印的 URL 四处飘散。或者，执行团队可能使用私人协作站点？）。 Glad to defend the end-user, but if somebody is seeking an answer, don't respond saying it's the right of the end-user to show or hide.很高兴为最终用户辩护，但如果有人寻求答案，请不要回应说显示或隐藏是最终用户的权利。 Sometimes it's the right of the client paying the bills.有时，这是客户支付账单的权利。
解决方案5
7 2015-03-06 06:12:26
Try this code, works 100% for me:试试这个代码，对我来说 100% 有效：
FOR Landscape:景观：
<head>
<style type="text/css">
@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>
</head>
FOR Portait: FOR波泰特：
<head>
<style type="text/css">
@page{
size: auto;
margin: 3mm;
}
</style>
</head>
解决方案6
1 2009-12-25 12:32:03
Since you mentioned "within their browser" and firefox, if you are using Internet Explorer, you can disable the page header/footer by temporarily setting of the value in the registry, see here for an example.由于您提到了“在他们的浏览器中”和 Firefox，如果您使用的是 Internet Explorer，您可以通过临时设置注册表中的值来禁用页眉/页脚，请参见此处的示例。 AFAIK I have not heard of a way to do this within other browsers. AFAIK 我还没有听说过在其他浏览器中执行此操作的方法。 Both Daniel's and Mickel's answers seems to collide with each other, I guess that there could be a similar setting somewhere in the registry for firefox to remove headers/footers or customize them. Daniel 和 Mickel 的答案似乎相互冲突，我想注册表中可能有类似的设置，以便 Firefox 删除页眉/页脚或自定义它们。 Have you checked it out?你检查出来了吗？
解决方案7
0 2012-12-11 16:50:36
@page margin:0mm 现在适用于 Firefox 19.0a2 (2012-12-07)。
解决方案8
0 2016-10-03 03:16:26
I solved my problem using some css into the web page.我在网页中使用一些 css 解决了我的问题。
<style media="print">
@page {
size: auto;
margin: 0;
}
</style>
解决方案9
0 2019-01-09 15:46:27
This worked for me with about 1cm margin这对我有用，边距大约为1 厘米
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
html
{
background-color: #FFFFFF;
margin: 0mm; /* this affects the margin on the html before sending to printer */
}
body
{
padding:30px; /* margin you want for the content */
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.