javascript - 从页面禁用浏览器打印选项(页眉、页脚、边距)?

标签 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 边距不同):

<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.

这在 Firefox 3.6IE 7Safari 5.1.7Google Chrome 4.1 中不起作用.

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

这是它在不同浏览器中的行为方式:

  • Internet Explorer 中,本次打印的设置中的边距实际上设置为 0mm,如果您进行预览,您将获得 0mm 作为默认值,但用户可以在预览。
    您将看到页面内容实际上定位正确,但浏览器打印页眉和页脚显示为非透明背景,因此有效地将页面内容隐藏在该位置。

  • Firefox 较新的版本中,它定位正确,但页眉/页脚文本和内容文本都显示,所以看起来很糟糕浏览器标题文本和您的页面内容。

  • Opera中,页面内容在标准css中使用非透明背景时会隐藏页眉,并且页眉/页脚位置与内容冲突。相当不错,但如果将边距设置为导致标题部分可见的小值,则看起来很奇怪。另外页边距设置不正确。

  • Chrome 较新版本中,如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突,浏览器页眉和页脚将被隐藏。在我看来,这正是它应该表现的方式。

所以结论是 Chrome 在隐藏页眉/页脚方面具有最佳实现。

关于javascript - 从页面禁用浏览器打印选项(页眉、页脚、边距)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1960939/

相关文章:

html - 将 svg 图像转换为按钮

javascript - 分配 "/"热键以在搜索框上创建焦点用户

javascript - 在基于 ajax 的网站的动态加载内容上运行 javascript

javascript - Heroku文件上传和node.js

javascript - 我可以对 div 使用 onmouseover 吗?

javascript - HTML、CSS、JS - 将文本区域与表格显示中的标签对齐

javascript - 如何判断 Firefox 表格单元格中的文本是否溢出?

javascript - HTML5 方向轴跳转

css - 在 div 周围环绕文本

javascript - 如果 url 的一部分与菜单项匹配,则将类添加到导航