关于javascript：要禁用页面的浏览器打印选项(页眉，页脚，边距)吗？ |
您所在的位置：网站首页 › 浏览器设置打印页边距 › 关于javascript：要禁用页面的浏览器打印选项(页眉，页脚，边距)吗？ |
|
我已经在SO和其他几个网站上以几种不同的方式问过这个问题，但其中大多数要么太过具体，要么已过时。我希望有人可以在这里提供明确的答案，而不必担心猜测。 当有人在浏览器中打印时，是否可以使用CSS或javascript更改默认打印机设置？当然，"通过浏览器打印"是指某种形式的HTML，而不是PDF或其他依赖于插件的mime类型。 请注意： 如果某些浏览器提供了此功能，而另一些却不提供(或者如果您只知道如何为某些浏览器提供此功能)，那么我欢迎特定于浏览器的解决方案。 同样，如果您知道主流浏览器对EVER这样做有特定的限制，那也很有用，但是希望您能得到一些相当新的文档。 (当XYZ在过去三年中对上述政策进行重大更改时，简单地说"违反XYZ的安全策略")。 最后，当我说"更改默认打印设置"时，并不是永远的意思，只是我的页面，我指的是打印页边距，页眉和页脚。 我非常清楚CSS提供了更改页面方向以及页面边距的选项。 Firefox是众多斗争之一。如果我将页边距设置为1英寸，则将其添加到已经放置的半英寸处。 我非常想减少客户网站上PDF的使用量，但主要是担心外观上的侵权(以及缺乏可靠性)。 相关讨论 您是否有特定原因要这样做？ 如果您说出要求，那么也许还有另一种可能的解决方案...对我来说，更改用户设置似乎不是一个很好的解决方案... 我同意。 我不想更改用户设置。 我想覆盖浏览器的默认设置。 原因是因为替代方法是使用PDF，当可以通过CSS使其他所有内容对打印机友好时，这似乎是不必要的。 我认为您已将答案作为解决方案，但仅适用于chrome。 您是否能够获得正确的跨浏览器解决方案？ 或至少在一些浏览器中？ 因为我有同样的问题 @mavili有关跨浏览器的解决方案，请参见stackoverflow.com/a/23778125/453605。CSS标准启用了一些高级格式。 CSS中有一个@page指令，该指令可以启用某些仅适用于分页媒体(如纸张)的格式。参见http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html。 缺点是不同浏览器中的行为不一致。 Safari仍然完全不支持设置打印机页面页边距，但是所有其他主要的浏览器现在都支持它。 使用@page指令，您可以指定页面的打印机页边距(与HTML元素的普通CSS页边距不同)： 12345678910111213141516171819202122232425262728 Print Test @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 */ } Top line Line 2Note 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.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中使用非透明背景时，页面内容会隐藏页眉，并且页眉/页脚位置与内容冲突。很好，但是如果margin设置为较小的值(导致标头部分可见)，则看起来很奇怪。另外页边距设置不正确。 在Chrome较新的版本中，如果@page页边距设置得太小，以致页眉/页脚位置与内容冲突，则浏览器的页眉和页脚将被隐藏。在我看来，这正是应该如何表现。 因此结论是，就隐藏页眉/页脚而言，Chrome具有最佳的实现方式。 相关讨论 需要澄清的是，这似乎并没有删除Firefox 21或IE10的标题，尽管我怀疑这确实导致标题/页脚没有占用空间。它确实适用于Chrome 28。 我已经更新以反映较新的浏览器版本。 Chrome现在已实现了最佳效果。 在IE8中，页眉和页脚仍然显示。 ：/ @SearchForKnowledge：是的，就像我说的一样-如果您阅读有关IE中行为方式的说明下的答案："您将看到页面内容实际上位置正确，但是浏览器的打印页眉和页脚隐藏了该页面满足那个位置。"我说它在IE 8中"确实有效"，而不是像我们想要的那样工作。我将编辑我的答案以使其更清楚。 除去标题，也除去左边的marign。所以我的所有文字现在都在页面的边缘。 @Mittchel：您还必须添加所需的填充。关键是您可以使用CSS对此进行完全控制。必须在主体上添加填充。由于我们指定media="print"，因此此样式将仅应用于纸上，因此不会影响屏幕布局。 @Mittchel：我已经更改了示例，以将html样式和主体样式分开，以便html样式可以隐藏页眉/页脚，而主体样式将处理您选择的内容边距。蓝色边框只是为了可视化车身容器上的范围。 有关跨浏览器的解决方案，请参见stackoverflow.com/a/23778125/453605。 "在隐藏页眉/页脚方面，Chrome浏览器具有最佳的实现方式。">如果一页以上，会发生什么？您将在工作表的不可打印区域中显示文本 @JulienM：很好。在这种情况下，我想说Chrome可以做到最好，因为您可以在@页面上定义一些边距。如果您指定的值太小以至于与页眉/页脚冲突，它将被隐藏。 此解决方案根本不起作用，因为@page边距和body边距是根本不同的东西：body边距仅适用于整个正文，即第一页的顶部和最后一页的底部页。对于所有中间页面，顶部/底部仍将具有零页边距。 @KonradRudolph：是的，你是对的。这仅适用于仅打印一页的内容。我将编辑我的答案以强调这一事实。 @awe在Microsoft打印到pdf中不起作用。 @BoopathiD：好吧，我只在Windows浏览器上进行过测试。 PDF编写器实际上本身就是自己的浏览器，并且倾向于不支持标准中的许多边缘情况。 Chrome和Opera以及Firefox 48 alpha 1及更高版本的任何最新版本您可以将页面页边距设置为过小的尺寸，以至于不能包含文本以禁用此功能(从敬畏的答案中借用)： 123456789101112@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 */ } 1234567891011121314 Middle-click to open in new tab Print document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent(''+document.documentElement.outerHTML)对于Firefox最高48 alpha 1的版本 您可以在标记中添加mozNoMarginBoxes属性，以防止打印URL，页码和Firefox添加到页边距的其他内容。 它可以在Firefox 29及更高版本中使用。您可以在此处查看差异的屏幕截图，或在此处查看实时示例。 请注意，示例中的mozDisallowSelectionPrint属性不需要从页边距中删除文本。请参阅PDF.js中的mozdisallowselectionprint属性有什么作用？ 其它浏览器 不幸的是，似乎没有办法在Internet Explorer中解决此问题，因此您将不得不求助于PDF或要求用户禁用边距文本。 Safari也是如此；根据@Luiz Perez的评论，Safari的最新版本(8、9.1和10)仍不支持@page来禁止显示空白文本。 我在Edge上找不到任何内容，也没有可供测试的Windows 10安装。 相关讨论 老实说，我同意这一点。如果您使用"系统对话框"进行打印，它甚至可以在Chrome中使用。只需确保设置了 。资料来源：https:bug743252.bugzilla.mozilla.orgattachment.cgi?id=714383 在Firefox上运行良好。 因此，这与支持chrome和safari的@page{ size: auto; margin: 3mm; }一起为我提供了跨浏览器解决方案。 该解决方案非常有效，可以消除FF中印刷材料中不需要的信息/内容。 谢谢！ 这很棒，但是IE呢？ 我在Safari 8、9.1和10上测试了此代码段，但并未删除那些版本的Safari中的页眉或页脚。 这种方法会将内容粘贴到页面之间的边缘：i.imgur.com/krDlC1K.png就像@Awe上面所说的，这是解决方案，已确认可以在Chrome中使用！！ 只要确保这在head标签内即可： 12345678910111213141516 @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 */ } 相关讨论 这是一个很好的解决方案！删除边距并删除页眉和页脚。我唯一的变化是，然后在主体样式中添加padding: 0.25in 0.5in;，以便获得准确，清晰的打印所需要的精确边距。在Chrome v25中工作，并且感谢这个特殊的项目，我们可以要求最终用户从几个现代浏览器中进行选择。 不幸的是，这会导致多页打印输出的问题。页面底部的文本被剪切。 在具有单页输出的Chrome 67.0.3396.99和Firefox 62.0b5上完美运行。我从一个想要删除标题，页码和html页脚的客户端收到类似的请求。在这种情况下，客户端将显示一个HTML页面，该页面可以兼作正式证书。添加的URL，页面和标题无关紧要，并导致最终产品不令人满意。在某些方面，它看起来很便宜。 Media = Print无法禁用这些浏览器默认设置。唯一的解决方法是告诉用户单击"齿轮"按钮并打开/关闭这些项目。认真地说，我不知道我可以做到20年(我们认为普通用户会知道单击切换按钮的线索吗？)。 如果CSS支持Media = Print，则它应该支持控制整个最终用户打印体验的功能。我感谢浏览器提供了添加的字段，但是，为什么需要CSS来控制总体打印体验？ 90％的解决方案可能是100％的三个领域！一个简单的： 1#BrowserPrintDefaults{display:none}就足够了。 同样，最终用户是否要打印出来也无关紧要(也许您的客户是非常私人的，不希望打印的URL随处可见。或者执行团队使用私人协作网站？)。很高兴为最终用户辩护，但是如果有人在寻找答案，请不要回答说这是最终用户显示或隐藏的权利。有时候，这是客户支付账单的权利。 相关讨论 我最终放弃了自己想要的一切。我绝对同意这应该在CSS中公开，因为所有浏览器都具有这些设置，并且这是一个表示元素。但是，这是作为应用程序级别首选项的场景，例如关闭cookie。 它是使用@page指令设置打印机页边距(与html页面的正文页边距不同)的官方CSS标准。当前，除Safari之外，所有主流浏览器都支持此功能，但是它如何影响页眉/页脚。最好的实现是在Opera和Chrome中。试试这个代码，对我来说100％有效： 对于景观： 12345678910 @page{ size: auto A4 landscape; margin: 3mm; }对于Portait： 12345678910 @page{ size: auto; margin: 3mm; } 相关讨论 CSS页面规则将设置边距，但不会删除浏览器放置的内置页眉和页脚(页面URL，页面编号等)这对我来说大约有1厘米的余量 1234567891011121314@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 */ }我通过使用一些CSS解决了网页中的问题。 123456 @page { size: auto; margin: 0; }@page margin：0mm现在可以在Firefox 19.0a2(2012-12-07)中使用。 由于您提到了"在他们的浏览器中"和firefox，因此，如果您使用的是Internet Explorer，则可以通过在注册表中临时设置值来禁用页眉/页脚，请参见此处的示例。 AFAIK我还没有听说过在其他浏览器中执行此操作的方法。 Daniel和Mickel的答案似乎相互冲突，我想注册表中可能会有类似的设置供Firefox删除页眉/页脚或对其进行自定义。你检查了吗？ 希望这对您有所帮助，祝节日快乐， 最好的祝福， 汤姆 相关讨论 在IE7 +中，您可以通过在打印预览中单击一个简单的按钮来禁用页眉/页脚。无需在注册表中做！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |