我在 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。
@page
缺点是不同浏览器中的行为不一致。Safari 仍然完全不支持设置打印机页边距,但所有其他主要浏览器现在都支持它。
使用该@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>
注意,我们这里基本上禁用了页面特定的边距,以达到去除页眉和页脚的效果,所以我们在正文上设置的边距不会在分页符中使用(正如Konrad 评论的那样),这意味着它只会起作用如果打印的内容只有一页,则正确。
这在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 在隐藏页眉/页脚方面有最好的实现。