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

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

问题描述

我在SO和其他几个网站上看到这个问题有几种不同的方式,但大多数都太具体或过时了。我希望有人可以在这里提供一个确定的答案,而不必揣测。



有人用CSS或javascript来更改默认打印机设置在他们的浏览器中打印?当然,从他们的浏览器打印我的意思是某种形式的HTML,而不是PDF或其他插件依赖mime类型。



请注意: p>

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



同样,如果你知道一个主流浏览器对EVER有这样的限制,这也是有帮助的,但是一些相当新的文档会被赞赏。 (简单地说,违反XYZ的安全政策在XYZ在过去三年里在所述政策中进行了重大改变时不是很令人信服)。



我说更改默认打印设置我不是永远,只是为我的页面,我具体指的是打印边距,页眉和页脚。



我我非常清楚,CSS提供了改变页面方向以及页面边距的选项。许多斗争之一是使用Firefox。如果我将页面边距设置为1英寸,它将ADDS设置为已经放置的半英寸。



我非常希望减少对我的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>打印测试< / title>
< style type =text / cssmedia =print>
@page
{
size:auto; / * auto是初始值* /
margin:0mm; / *这会影响打印机设置中的边距* /
}

html
{
background-color:#FFFFFF;
margin:0px; / *这在发送到打印机之前影响html的边距* /
}

body
{
border:solid 1px blue;
margin:10mm 15mm 10mm 15mm; / *您想要的内容* /
}
< / style>
< / head>
< body>
< div>顶行< / div>
< div>第2行< / div>
< / body>
< / html>

这在 Firefox 3.6 IE 7 Safari 5.1.7 Google Chrome 4.1



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



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




  • Internet Explorer ,边距实际上在此打印的设置中设置为0mm,如果您执行预览,您将默认0mm,但用户可以在预览中更改它。

    您将看到页面内容实际上位于正确位置,但是浏览器打印页眉和页脚显示为非透明背景,因此可以有效地隐藏该位置的页面内容。


  • Firefox 较新版本中,


  • Opera 中,系统会显示浏览器标题文字和您的网页内容。页面内容在标准css中使用非透明背景时隐藏标题,并且页眉/页脚位置与内容冲突。非常好,但看起来奇怪,如果margin设置为一个小的值,导致头部分可见。


  • Chrome 较新版本中,浏览器标题和margin设置为小到页眉/页脚位置与内容冲突。




因此,结论是 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>

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆