当前位置: 首页 > 面试题库 >

禁用页面的浏览器打印选项(页眉,页脚,边距)?

白智
2023-03-14
问题内容

我已经在SO和其他一些网站上以几种不同的方式问过这个问题,但是其中大多数要么太具体,要么已经过时。我希望有人可以在这里提供明确的答案,而不必担心猜测。

当有人在浏览器中打印时,是否可以使用CSS或javascript更改默认打印机设置?当然,“从他们的浏览器打印”是指某种形式的HTML,而不是PDF或其他依赖于插件的mime类型。

请注意:

如果某些浏览器提供了此功能,而另一些却不提供(或者如果您只知道如何为某些浏览器提供此功能),那么我欢迎特定于浏览器的解决方案。

同样,如果您知道主流浏览器对EVER这样做有特定的限制,那么这也很有帮助,但是希望您能得到一些相当新的文档。(当XYZ在过去三年中对上述政策进行了重大更改时,简单地说“违反XYZ的安全政策”并不令人信服)。

最后,当我说“更改默认打印设置”时,并不是永远的,只是我的页面,我指的是打印页边距,页眉和页脚。

我非常清楚CSS提供了更改页面方向以及页面边距的选项。Firefox是众多斗争之一。如果我将页边距设置为1英寸,则将其添加到已经放置的半英寸处。

我非常想减少客户网站上PDF的使用量,但主要是担心外观上的侵权(以及缺乏可靠性)。


问题答案:

CSS标准启用了一些高级格式。@pageCSS中有一个指令,可启用某些仅适用于分页媒体(如纸张)的格式。。

缺点是不同浏览器中的行为不一致。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>

请注意,我们基本上在这里禁用了页面特定的页边距,以达到删除页眉和页脚的效果,因此我们在正文上设置的页边距将不会在分页符中使用,这意味着它将只能工作如果打印的内容只有一页,则正确。

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

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

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

  • Internet Explorer中 ,此打印设置中的边距实际上设置为0mm,如果执行“预览”,则默认为0mm,但用户可以在预览中进行更改。
    你会看到页面内容实际上是 定位 正确,但浏览器打印页眉和页脚显示与非透明背景,因此有效地隐藏在该位置的页面内容。

  • Firefox的 较新版本中,它的 位置 正确,但是同时显示了页眉/页脚文本和内容文本,因此,它看起来像是浏览器标题文本和页面内容的混合体。

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

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

因此结论是,就隐藏页眉/页脚而言, Chrome 具有最佳的实现方式。



 类似资料:
  • 问题内容: 我的有了HTML 。 我想问的问题是: 有什么方法可以删除网络浏览器添加到打印页面的字符串? 如: 打印页面的网站 页数 网页标题 印刷日期 问题答案: Google文档现在通过生成文档的PDF版本来解决这个问题。 如果您使用的是Chrome,它将自动在新标签中打开PDF并弹出打印对话框。其他浏览器会提示您下载生成的文件(不一定是明显的行为)。 尽管我认为这不是一个优雅的解决方案,但应

  • 本文向大家介绍打印页面时怎样自定义打印页眉页脚或者去掉眉页脚?相关面试题,主要包含被问及打印页面时怎样自定义打印页眉页脚或者去掉眉页脚?时的应答技巧和注意事项,需要的朋友参考一下 <style type="text/css" media="print"> @page { size: auto; /* auto is the initial value / margin: 0mm; / this a

  • 问题内容: 根据我的研究,看来我想做的事是不可能的,但是如果情况有所变化,我想检查一下是否有人想出办法。 我有一个Web应用程序,可以根据浏览器窗口中的用户选择生成打印报告。我有一个自定义的页眉和页脚,当从浏览器打印报告时,应在每个打印的页面上重复该页眉和页脚。它不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚。另外,我不认为这是CSS和媒体类型的问题,但我不是CSS专家。我没有让页眉和

  • 问题内容: 亲爱的所有人,我尝试过CSS位置:固定属性,但是它在Firefox和IE(适用于IE6的hack)上可以正常工作,但对于Chrome则根本不起作用。我以为Chrome是最新的,将非常容易地支持它,但事实并非如此。我尝试了, 再次在IE和Firefox中运行,但在Chrome中出现了问题。请任何人对此有替代解决方案。 问题答案: 这是我使用的代码。注意我将html和正文高度都设置为100

  • 问题内容: 我有一个客户想打印的网页,而我遇到的麻烦是让页脚位于最后一个打印页面的底部,而不仅仅是内容结束时 我尝试了类似的东西 但它在每页末尾显示页脚。 也许我对CSS的要求太高了…可行吗? 我想我应该对 的(^_^)发疯 问题答案: 尝试将相对的身体和绝对的页脚定位: 借助CSS 3 Paged Media模块,您可以使用以下代码:

  • 也许以前有人问过这个问题,但我似乎找不到一个准确的答案或解决办法。我开始使用RecycerView,并使用LinearLayoutManager实现了它。现在,我想添加自定义的页眉和页脚项,这些项不同于RecycerView中的其他项。页眉和页脚不应该粘,我希望他们滚动与其余的项目。有人能指出一些例子如何做到这一点或只是分享想法。我会非常感激的。THX