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

2020/10/21 00:42 · javascript ·  · 0评论

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

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

请注意:

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

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

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

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

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

CSS标准启用了一些高级格式。@pageCSS中有一个指令,可启用某些仅适用于分页媒体(如纸张)的格式。参见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>

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

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

设置@page边距在IE 8Opera 10Google Chrome 21Firefox 19中确实有效

尽管在这些浏览器中为您的内容正确设置了页边距,但是这种行为在尝试解决页眉/页脚的隐藏方面并不理想。

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

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

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

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

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

  • Chrome较新的版本中,如果@page页边距设置得太小,以致页眉/页脚位置与内容冲突,则浏览器的页眉和页脚将被隐藏。我认为,这恰恰就是这种行为。

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

任何最新版本的Chrome和Opera,以及Firefox 48 alpha 1和更高版本

您可以将页面边距设置为过小的尺寸,以至于不能包含文本以禁用此功能(从敬畏的答案中借用):

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

对于Firefox最高48 alpha 1的版本

您可以mozNoMarginBoxes<html>标签添加属性,以防止打印URL,页码和Firefox添加到页边距的其他内容。

它可以在Firefox 29及更高版本中使用。您可以在此处查看差异的屏幕截图,或在此处查看实时示例。

注意,mozDisallowSelectionPrint在该示例属性要求除去从边缘的文本; 请参阅PDF.js中的mozdisallowselectionprint属性有什么作用?

其它浏览器

不幸的是,似乎没有办法在Internet Explorer中解决此问题,因此您将不得不求助于PDF或要求用户禁用边距文本。

Safari也是如此;根据@Luiz Perez的评论,Safari的最新版本(8、9.1和10)仍然不支持 @page禁止显示空白文本。

我在Edge上找不到任何内容,也没有Windows 10安装可供测试。

就像@Awe上面所说的,这是解决方案,已确认可以在Chrome中使用!!

只要确保这在head标签内即可:

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

我从一个想要删除标题,页码和html页脚的客户端收到类似的请求。在这种情况下,客户端将显示一个HTML页面,该页面可以兼作正式证书。添加的URL,页面和标题无关紧要,并导致最终产品不令人满意。在某些方面,它看起来很便宜。

Media = Print无法禁用这些浏览器默认值。唯一的解决方法是告诉用户单击“齿轮”按钮并打开/关闭这些项目。认真地说,我不知道我可以做到20年(我们认为普通用户会知道单击切换按钮的线索吗?)。

如果CSS支持Media = Print,则它应该支持控制整个最终用户打印体验的功能。我感谢浏览器提供了添加的字段,但是,为什么需要CSS来控制总体打印体验?90%的解决方案可能是100%的三个领域!一个简单的:

#BrowserPrintDefaults{display:none} 

就足够了。

同样,最终用户是否要打印出来也无关紧要(也许您的客户是非常私人的,不希望打印的URL随处可见。或者执行团队使用私人协作网站?)。很高兴为最终用户辩护,但是如果有人在寻找答案,请不要回应,这是最终用户显示或隐藏的权利。有时候,这是客户支付账单的权利。

试试下面的代码,对我来说100%有效:
FOR 景观:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

FOR 波泰特:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

由于您提到过“在他们的浏览器中”和firefox,因此,如果您使用的是Internet Explorer,则可以通过在注册表中临时设置值来禁用页眉/页脚,请参见此处的示例。AFAIK我还没有听说在其他浏览器中执行此操作的方法。Daniel和Mickel的答案似乎相互冲突,我想注册表中可能有类似的设置供Firefox删除页眉/页脚或对其进行自定义。你检查了吗?

@page margin:0mm现在可以在Firefox 19.0a2(2012-12-07)中使用。

我使用一些CSS解决了网页中的问题。

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

这对我来说大约有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 */
}
本文地址:http://javascript.askforanswer.com/jinyongyemiandeliulanqidayinxuanxiangyemeiyejiaobianju.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!