从 window.print()中删除页眉和页脚

我使用 window.print ()打印页面，但是我得到的页眉和页脚包含页面标题、文件路径、页码和日期。如何移除它们？

我也试过打印样式表。

#header, #nav, .noprint
{
display: none;
}

请帮帮我，谢谢。

333857 次浏览
小开

在 Chrome 中，可以使用以下方法隐藏这个自动页眉/页脚

@page { margin: 0; }

由于内容将扩展到页面的限制，页面打印页眉/页脚将不存在。当然，在这种情况下，应该在 body 元素中设置一些边距/填充，这样内容就不会一直延伸到页面的边缘。由于普通打印机不能实现无边距打印，而且它可能不是你想要的，你应该使用这样的东西:

@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}

正如 马丁在一篇评论中指出的，如果内容太大，需要几页纸，印刷版就不好看了: 只有第一页有1.6厘米的上边距，只有最后一页有1.6厘米的下边距。中间的页面没有顶部和底部页边距。

在2013年5月这个答案最初的时候，它只能在 Chrome 上运行(编辑: 2022年10月在 FF 上运行) ，现在还不确定，不需要再试一次。如果你需要一个浏览器的支持，你可以创建一个 PDF 文件并打印出来(你可以创建一个自动打印的 PDF 文件并嵌入 JavaScript) ，但这是一个巨大的麻烦。

小开

我确信在你的 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>
小开

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 中，https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383(查看页面来源: : tag HTML)。

在代码中，将 <html>替换为 < code > < html moznomarginbox mozdisallowselectionprint > 。

小开

今天我的同事偶然发现了同样的问题。

由于“页边距: 0”解决方案适用于基于 chrome 的浏览器，但是，即使@page 页边距设置为零，Internet Explorer也会继续打印页脚。

解决方案(更像是黑客行为)是在@页面上放置负边距。

@page {margin:0 -6cm}
html {margin:0 6cm}

请注意，负边距不适用于 Y 轴，只适用于 X 轴

希望能有帮助。

小开

你不用写任何代码。在第一次调用 window.print ()之前更改浏览器的打印设置。 例如 Firefox:

  1. 按 Alt 或 F10查看菜单栏
  2. 单击“文件”，然后单击“页面设置”
  3. 选择标签页边距和页眉/页脚
  4. 更改空白的 URL-> 形象

以及另一个 IE 的例子(我使用 IE11的早期版本，你可以看到这个 防止 Firefox 或 Internet Explorer 在每个页面上打印 URL) :

  1. 按 Alt 或 F10查看菜单栏
  2. 单击“文件”，然后单击“页面设置”
  3. 在页眉和页脚部分将 URL 更改为空。
小开

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>
  1. 对于火狐，正如 l2aelba 所说,

中添加 moznomarginbox 属性 例如:

<html moznomarginboxes mozdisallowselectionprint>
小开 
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
小开

如果您碰巧向下滚动到这一点，我找到了 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>
小开

这将是最简单的解决方案。我尝试了大多数的解决方案在互联网上，但只有这个帮助我。

@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
小开

@page { margin: 0; }在 Chrome 和 Firefox 中运行良好。我还没有找到通过 CSS 修复 IE 的方法。但是你可以在你自己的机器上进入 IE 中的页面设置，并将页边距设置为0。按 alt 然后在左上角的文件菜单，你会发现页面设置。一次只对一台机器有效。

小开

因此，基本思想是有一个 div (不显示任何内容) ，其中包含要打印的项目。现在点击一个按钮不要打印到整个主体，而只是打印特定的 div。使用 window.print ()打印 div (HTML 的一部分)时遇到了很多问题。使用下面的方法，它的工作无缝的边缘，铬和 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>
小开 
 <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>

//将其放在脚本文件或脚本标记中。

这将删除所有的页边距，您将无法看到页眉和页脚。

小开

避免顶部和底部边距将解决你的问题

@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}

提交答案