我正在使用window.print（）打印页面，但我的页眉和页脚包含页面标题，文件路径，页码和日期。如何删除它们？
我也试过打印样式表。
#header, #nav, .noprint
{
display: none;
}
请帮忙。感谢。
答案 0 :(得分：115)
在Chrome中，可以使用
隐藏此自动页眉/页脚@page { margin: 0; }
由于内容将扩展到页面限制，因此页面打印页眉/页脚将不存在。当然，在这种情况下，您应该在body元素中设置一些边距/填充，以便内容不会一直延伸到页面的边缘。由于普通打印机无法获得无边距打印，并且可能不是您想要的，您应该使用以下内容：
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
正如Martin在评论中指出的那样，如果页面有一个滚动超过一页的长元素（如大表），则会忽略边距，并且打印版本看起来很奇怪。
在此回答的原始时间（2013年5月），它仅适用于Chrome，现在不确定，从不需要再试一次。如果您需要支持无法播放的浏览器，您可以动态创建PDF并打印（您可以在其上创建自我打印的PDF嵌入JavaScript），但这是一个巨大的麻烦。
答案 1 :(得分：20)
Firefox：
moznomarginboxes <html>属性
示例：
<html moznomarginboxes mozdisallowselectionprint>
答案 2 :(得分：18)
我确定在您的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>
答案 3 :(得分：10)
今天我的同事偶然发现了同样的问题。
作为＆＃34;保证金：0＆＃34;解决方案适用于基于铬的浏览器，但是，即使@page页边距设置为零， Internet Explorer 也会继续打印页脚。
解决方案（更多的是黑客攻击）是在@page上添加负余量。
@page {margin:0 -6cm}
html {margin:0 6cm}
请注意，负边距不适用于Y轴，仅适用于X
希望它有所帮助。
答案 4 :(得分：8)
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>
并且for firefox使用它
在Firefox中，https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383（查看页面源代码::标记HTML）。
在您的代码中，将<html>替换为<html moznomarginboxes mozdisallowselectionprint>.
答案 5 :(得分：2)
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
答案 6 :(得分：2)
这将是最简单的解决方案。我尝试了Internet上的大多数解决方案，但这仅对我有所帮助。
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
答案 7 :(得分：2)
@page { margin: 0; }在Chrome和Firefox中运行良好。我还没有找到通过CSS修复IE的方法。但是您可以在自己的计算机上的IE中进入页面设置，并将页边距设置为0。按alt，然后按左上角的文件菜单，您将找到页面设置。一次只能在一台机器上使用...
答案 8 :(得分：2)
避免顶部和底部边距将解决您的问题
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}
答案 9 :(得分：1)
所以基本的想法是有一个包含要打印的项目的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 :(得分：0)
您不必编写任何代码。在第一次调用window.print（）之前更改浏览器的打印设置。 例如在firefox中：
和IE的另一个例子（我在以前的版本中使用IE 11，你可以看到这个Prevent Firefox or Internet Explorer from Printing the URL on Every Page）：
答案 11 :(得分：0)
1. 适用于Chrome＆amp; 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>
答案 12 :(得分：0)
如果你碰巧向下滚动到这一点，我找到了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>
答案 13 :(得分：0)
我试图删除手动打印的html页面的页眉和页脚。
此页面上没有任何解决方案对我有用，而只是按照here的定义定义自己的页脚，Firefox不会添加自己的页眉和页脚。
不幸的是，这不适用于Chrome。
在CSS中：
@media screen {
div.divFooter {
display: none;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
将此添加到您的HTML：
<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
答案 14 :(得分：0)
<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>
//将其放在脚本文件或脚本标签中。
这将删除所有边距，您将看不到页眉和页脚。