我正在使用 window.print() 打印页面，但我得到的页眉和页脚包含页面标题、文件路径、页码和日期。如何删除它们？
我也试过打印样式表。
#header, #nav, .noprint
{
display: none;
}
请帮忙。谢谢。
【问题讨论】：
在 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; } .
body { margin: 1.6cm; } - 因为它是整个文档的边距 - 不会尊重多页的垂直边距文件，除了第一个和最后一个。可悲的是，我想不出解决方法。
我确信在您的 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>
【讨论】：
火狐：
<html> 中添加moznomarginboxes 属性
示例：
<html moznomarginboxes mozdisallowselectionprint>
【讨论】：
今天我的同事偶然发现了同样的问题。
由于 "margin:0" 解决方案适用于基于 chromium 的浏览器，但即使 @page 边距设置为零，Internet Explorer 仍会继续打印页脚。
解决方案（更像是一种 hack）是在 @page 上设置负边距。
@page {margin:0 -6cm}
html {margin:0 6cm}
请注意负边距不适用于 Y 轴，仅适用于 X
希望对你有帮助。
【讨论】：
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>.
【讨论】：
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
【讨论】：
避免顶部和底部边距将解决您的问题
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}
【讨论】：
@page { margin: 0; } 在 Chrome 和 Firefox 中运行良好。我还没有找到通过css修复IE的方法。但是您可以在您自己的机器上进入 IE 中的页面设置，并将边距设置为 0。按 alt，然后按左上角的文件菜单，您会找到页面设置。这一次只适用于一台机器......
【讨论】：
所以基本的想法是有一个包含要打印的项目的 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>
【讨论】：
这将是最简单的解决方案。我尝试了互联网上的大多数解决方案，但只有这个对我有帮助。
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
【讨论】：
<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>
//放在脚本文件或脚本标签中。
这将删除所有边距，您将无法看到页眉和页脚。
【讨论】：
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>
在中添加 moznomarginboxes 属性 示例：
<html moznomarginboxes mozdisallowselectionprint>
【讨论】：
如果您碰巧向下滚动到这一点，我找到了 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>
【讨论】：
您不必编写任何代码。就在第一次调用 window.print() 之前更改浏览器的打印设置。 例如在 Firefox 中：
还有另一个 IE 示例（我在以前的版本中使用 IE 11，你可以看到这个Prevent Firefox or Internet Explorer from Printing the URL on Every Page）：
【讨论】：