从 window.print() 中删除页眉和页脚
Posted
技术标签:
【中文标题】从 window.print() 中删除页眉和页脚【英文标题】：Remove header and footer from window.print() 【发布时间】：2012-01-03 21:54:17 【问题描述】：我正在使用 window.print() 打印页面，但我得到的页眉和页脚包含页面标题、文件路径、页码和日期。如何删除它们？
我也试过打印样式表。
#header, #nav, .noprint
display: none;
请帮忙。谢谢。
【问题讨论】：
这些元素特定于用户的浏览器设置。我认为您无法通过 CSS 或 javascript 删除它们。 我认为这个问题需要澄清一下：您是要删除屏幕上显示的 html 的页眉和页脚元素，还是要消除打印添加的页眉和页脚功能？ 【参考方案1】：在 Chrome 中，可以使用隐藏此自动页眉/页脚
@page margin: 0;
由于内容将扩展到页面的限制，页面打印页眉/页脚将不存在。当然，在这种情况下，您应该在 body 元素中设置一些边距/填充，这样内容就不会一直延伸到页面的边缘。由于普通打印机无法进行无边距打印并且可能不是您想要的，因此您应该使用以下内容：
@media print
@page margin: 0;
body margin: 1.6cm;
正如Martin 在评论中指出的那样，如果页面有一个滚动过一页的长元素（如一张大桌子），边距会被忽略，打印出来的版本会看起来很奇怪。
在这个答案的原始时间（2013 年 5 月），它只适用于 Chrome，现在不确定，不需要再试一次。如果您需要对无法支持的浏览器的支持，您可以即时创建 PDF 并打印（您可以创建在其上嵌入 JavaScript 的自打印 PDF），但这很麻烦。
【讨论】：
由于某种原因，body margin: 1.6cm; 忽略了我的右边距（可能是因为我使用的是text-align:right），所以我为我的内容创建了一个<div class="container"> 并改用了.container margin: 1.6cm; .
我正在用 Chrome 33 尝试这个。效果很好，但要小心，因为 body margin: 1.6cm; - 因为它是整个文档的边距 - 不会尊重多页的垂直边距文件，除了第一个和最后一个。可悲的是，我想不出解决方法。
嘿@Diego，我对你的建议很满意，我的页眉页脚已被删除，但我的打印页面增加了。 “body margin: 1.6cm; ” 只需将 1.6cm 更改为 1.0cm 就可以了.. :) 快乐编码
这里有更广泛的答案：***.com/questions/1960939/…
删除页边距并添加正文边距为我生成了一个空白页。我将正文边距更改为填充，它起作用了。【参考方案2】：
我确信在您的 css 文件中添加此代码将解决问题
<style type="text/css" media="print">
@page
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
</style>
You may visit this to know more about this
【讨论】：
没有。它不工作。设置边距就是这样。它仍在页眉和页脚上显示 url 和日期时间 适用于 Chrome 和 Firefox，但不适用于 IE 11。【参考方案3】：火狐：
在<html> 中添加moznomarginboxes 属性
示例：
<html moznomarginboxes mozdisallowselectionprint>
【讨论】：
在 Firefox 48 发布后（2016 年 8 月）这将不再起作用：bugzilla.mozilla.org/show_bug.cgi?id=1260480 它对我不起作用，FF 61，但 @page margin: 0; 解决方案似乎也适用于 FF。【参考方案4】：今天我的同事偶然发现了同样的问题。
由于 "margin:0" 解决方案适用于基于 chromium 的浏览器，但即使 @page 边距设置为零，Internet Explorer 仍会继续打印页脚。
解决方案（更像是一种 hack）是在 @page 上设置负边距。
@page margin:0 -6cm
html margin:0 6cm
请注意负边距不适用于 Y 轴，仅适用于 X
希望对你有帮助。
【讨论】：
【参考方案5】：CSS 标准支持一些高级格式。 CSS 中有一个 @page 指令，可以启用一些仅适用于分页媒体（如纸张）的格式。见http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html。
<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 current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
body
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>Firefox 使用它
在 Firefox 中，https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383（查看页面源代码 :: 标签 HTML）。
在您的代码中，将 <html> 替换为 <html moznomarginboxes mozdisallowselectionprint>.
【讨论】：
【参考方案6】：@media print
.footer,
#non-printable
display: none !important;
#printable
display: block;
【讨论】：
这看起来是正确的方法。即使在我的情况下进入 iframe 上下文，它也很有效。 我认为这实际上并不适用于如何隐藏浏览器添加到打印页面的默认页眉/页脚（带有日期和网址以及页码等）的问题。我认为这只是创建要打印的 div 并隐藏您不想打印的其他 div 的简化示例。【参考方案7】：避免顶部和底部边距将解决您的问题
@media print
@page
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
【讨论】：
【参考方案8】：@page margin: 0; 在 Chrome 和 Firefox 中运行良好。我还没有找到通过css修复IE的方法。但是您可以在您自己的机器上进入 IE 中的页面设置，并将边距设置为 0。按 alt，然后按左上角的文件菜单，您会找到页面设置。这一次只适用于一台机器......
【讨论】：
【参考方案9】：所以基本的想法是有一个包含要打印的项目的 div（不显示）。现在点击一个按钮不会打印到整个身体，而只是那个特定的 div。使用 window.print() 打印 div（HTML 的一部分）时遇到很多问题。使用下面的方法，它对我来说可以在 edge、chrome 和 Mozilla 中无缝运行，看看它是否也对你有帮助。
function printDiv(id)
var contents = document.getElementById(id).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write("<html><head>\n\n " +
"<style type=\"text/css\" media=\"print\">\n " +
"@@page\n \n " +
"size: auto; /* auto is the initial value */\n " +
"margin: 10mm; /* this affects the margin in the printer settings */\n " +
" \n\n html\n \n " +
" background-color: #FFFFFF;\n " +
" \n\n body\n " +
" font-family:\"Times New Roman\", Times, serif;\n " +
" border: none ;\n " +
" margin: 0; /* margin you want for the content */\n " +
" \n .table \n width: 100%;\n " +
" max-width: 100%;\n margin-bottom: 20px;\n " +
" border-collapse: collapse;\n " +
" background-color: transparent;\n display: table;\n " +
" \n .table-bordered \n " +
" border: 1px solid #ccc;\n \n tr \n " +
" display: table-row;\n vertical-align: inherit;\n " +
" border-color: inherit;\n padding:15px;\n \n " +
" .table-bordered tr td border: 1px solid #ccc!important; padding:15px!important;\n " +
" </style><title></title></head><body>".concat(contents, "</body>"));
frameDoc.document.close();
setTimeout(function ()
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
, 500);
return false;
这样称呼
<a href="#" onclick="javascript:printDiv('divwithcontenttoprint')"> Print </a>
【讨论】：
【参考方案10】：这将是最简单的解决方案。我尝试了互联网上的大多数解决方案，但只有这个对我有帮助。
@print
@page :footer color: #fff
@page :header color: #fff
【讨论】：
这没有任何作用。【参考方案11】： <html>
<head>
<title>Print</title>
<script type="text/javascript">
window.print();
document.margin='none';
</script>
</head>
<body>
<p>hello</p>
<p>hi</p>
</body>
</html>
//放在脚本文件或脚本标签中。
这将删除所有边距，您将无法看到页眉和页脚。
【讨论】：
【参考方案12】：1.适用于 Chrome 和 IE
<script language="javascript">
function printDiv(divName)
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
-
正如 l2aelba 所说，对于 FireFox，
在中添加 moznomarginboxes 属性 示例：
<html moznomarginboxes mozdisallowselectionprint>
【讨论】：
在上面的代码中 是可选的。【参考方案13】：如果您碰巧向下滚动到这一点，我找到了 Firefox 的解决方案。它将打印来自特定 div 的内容，没有页脚和页眉。您可以根据需要进行自定义。
首先，下载并安装这个插件：JSPrintSetup。
其次，写这个函数：
<script>
function PrintElem(elem)
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(elem);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
//jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
jsPrintSetup.setSilentPrint(1);
//sent empty page header
jsPrintSetup.setOption('headerStrLeft', '');
jsPrintSetup.setOption('headerStrCenter', '');
jsPrintSetup.setOption('headerStrRight', '');
// set empty page footer
jsPrintSetup.setOption('footerStrLeft', '');
jsPrintSetup.setOption('footerStrCenter', '');
jsPrintSetup.setOption('footerStrRight', '');
// print my window silently.
jsPrintSetup.printWindow(mywindow);
jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog
mywindow.close();
return true;
</script>
第三，在你的代码中，无论你想在哪里写打印代码，都这样做（我用过JQuery，你可以用纯javascript）：
<script>
$("#print").click(function ()
var contents = $("#yourDivToPrint").html();
PrintElem(contents);
)
</script>
显然，你需要点击链接：
<a href="#" id="print">Print my Div</a>
还有要打印的 div：
<div id="yourDivToPrint">....</div>
【讨论】：
【参考方案14】：您不必编写任何代码。就在第一次调用 window.print() 之前更改浏览器的打印设置。 例如在 Firefox 中：
-
按 Alt 或 F10 查看菜单栏
点击文件，然后点击页面设置
选择标签页边距和页眉/页脚
将 URL 更改为空白 ->
image
还有另一个 IE 示例（我在以前的版本中使用 IE 11，你可以看到这个Prevent Firefox or Internet Explorer from Printing the URL on Every Page）：
-
按 Alt 或 F10 查看菜单栏
点击文件，然后点击页面设置
在页眉和页脚部分将 URL 更改为空。
【讨论】：
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review 感谢 SurvivalMachine 的建议。几分钟前我编辑了我的答案:) 嗯...我不喜欢跑遍我所有的用户并更新他们的浏览器（不管他们使用多少）来考虑这个应用程序，特别是如果他们住在另一边的星球。另外，如果他们需要为另一个应用程序恢复设置怎么办？这不是答案。 这种方法缺乏嵌入页面/应用程序的功能所提供的跨浏览器功能。以上是关于从 window.print() 中删除页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章