Ant*_*ony 179 html javascript css browser printing
我已经在SO和其他几个网站上以几种不同的方式看到了这个问题,但其中大部分都是过于具体或过时的.我希望有人可以在这里提供一个明确的答案,而不必接受猜测.
有人用CSS或javascript来改变默认打印机设置,当有人在浏览器中打印时？当然,"来自浏览器的打印"是指某种形式的HTML,而不是PDF或其他一些插件依赖的mime类型.
请注意:
如果某些浏览器提供此功能而其他浏览器不支持(或者如果您只知道如何为某些浏览器执行此操作),我欢迎特定于浏览器的解决方案.
同样,如果您知道主流浏览器对EVER有特定限制,这也很有帮助,但一些相当最新的文档将不胜感激.(简单地说"违背XYZ的安全政策"并不是很有说服力,因为XYZ在过去三年中对所述政策做出了重大改变).
最后,当我说"更改默认打印设置"时,我并不是永远,只是为了我的页面,我指的是打印页边距,页眉和页脚.
我非常清楚CSS提供了更改页面方向和页边距的选项.Firefox的许多难题之一.如果我将页边距设置为1英寸,则将其加到已经放置的半英寸处.
我非常希望减少客户网站上PDF的使用,但是主要关注的是展示的侵权(以及缺乏可靠性).
awe*_*awe 197
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.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在隐藏页眉/页脚方面具有最佳实现.
use*_*118 85
您可以将页边距设置为太小而不能包含文本的大小,以便禁用此功能(借用敬畏的答案):
@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>您可以mozNoMarginBoxes向<html>标记添加属性,以防止Firefox添加到页边距的URL,页码和其他内容被打印.
它在Firefox 29及更高版本中运行.您可以在此处看到差异的屏幕截图,或者在此处查看实时示例.
注意,mozDisallowSelectionPrint在该示例属性不要求除去从边缘的文本; 请参阅PDF.js中的mozdisallowselectionprint属性有什么作用？.
不幸的是,似乎无法在Internet Explorer中解决此问题,因此您将不得不求助于PDF或要求用户禁用边距文本.
Safari也是如此; 根据@Luiz Perez的评论,最新版本的Safari(8,9.1和10)仍然不支持 @page抑制边距文本.
我在Edge上找不到任何东西,我没有可用于测试的Windows 10安装.
小智 20
正如@Awe上面所说,这是解决方案,确认可以在Chrome中运行!!
只需确保这是头部标签:
<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>
小智 16
我从谁愿意有标题,页码和HTML页脚删除客户端的类似请求.在这种情况下,客户端呈现的HTML页面可以兼作正式证书.添加的URL,页面和标题无关紧要,导致最终产品不太令人满意.在某些方面,它看起来很便宜.
Media = Print无法禁用这些浏览器默认值.唯一的解决方法是告诉用户单击"齿轮"按钮并打开/关闭这些项目.说真的,我不知道20年后我能做到这一点(我们认为典型的用户会有点击切换按钮的线索吗？).
如果CSS支持Media = Print,它应该支持控制整个最终用户打印体验的能力.我很欣赏浏览器提供了添加的字段,但是,为什么不允许CSS控制整体打印体验 - 如果这是你想要的.90%的解决方案可能是100%,还有三个领域!一个简单的:
#BrowserPrintDefaults{display:none}
就够了
同样,最终用户是否想要将其打印出来也不是问题(也许您的客户非常私密,并且不希望打印的网址浮动.或者执行团队可能使用私人协作网站？).很高兴为最终用户辩护,但如果有人正在寻求答案,请不要回答说这是最终用户显示或隐藏的权利.有时这是客户支付账单的权利.
小智 5
试试这个代码,100%为我工作:
FOR Landscape:
<head>
<style type="text/css">
@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>
</head>
为 Portait:
<head>
<style type="text/css">
@page{
size: auto;
margin: 3mm;
}
</style>
</head>