从window.print（）删除页眉和页脚

109

我使用window.print（）打印页面，但页眉和页脚包含页面标题，文件路径，页面编号和日期。如何删除它们？

我也尝试过打印样式表。

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

请帮忙。谢谢。

css  printing 
— 维拉克
source
7
这些元素特定于用户的浏览器设置。我认为您将无法通过CSS或JavaScript删除它们。
— Michael Berkowski
我认为这个问题需要澄清：您是要删除显示在屏幕上的HTML的页眉和页脚元素，还是要消除打印功能添加的页眉和页脚？
— AlanObject

Answers:

149

在Chrome中，可以使用来隐藏此自动页眉/页脚

@page { margin: 0; }

由于内容将扩展到页面的限制，因此将缺少页面打印页眉/页脚。当然，在这种情况下，您应该在body元素中设置一些边距/内边距，以使内容不会一直延伸到页面边缘。由于普通打印机无法进行无边距打印，而且可能不是您想要的，因此应使用以下方法：

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

正如Martin在评论中指出的那样，如果页面上有一个长元素滚动到一页（例如一张大桌子）上，则页边距将被忽略，并且印刷版本看起来会很奇怪。

在最初获得此答案（2013年5月）时，它只能在Chrome上运行，目前尚不确定，无需再试。如果您需要无法运行的浏览器的支持，则可以即时创建PDF并进行打印（可以在其上嵌入JavaScript的自打印PDF），但这是一个很大的麻烦。

— 迭戈·纽内斯
source
2
由于某种原因，body { margin: 1.6cm; }我忽略了我的正确边距（也许是因为我在使用text-align:right），所以我<div class="container">为自己的内容创建了a 并.container { margin: 1.6cm; }改为使用。
— rybo111
8
我正在使用Chrome 33进行尝试。它可以很好地工作，但要小心，因为body { margin: 1.6cm; }-因为这是整个文档的边距-除第一个和最后一个文档外，不遵守多页文档的垂直边距。可悲的是，我想不出解决方法。
— pau.moreno，2014年
嘿@Diego，我对您的建议感到满意，并且我的页眉页脚已删除，但我的打印页已增加。“ body {margin：1.6cm;}”只需将1.6cm更改为1.0cm即可使用。:)快乐的编码
— Vishal Kiri
3
这里有一个更广泛的答案：stackoverflow.com/questions/1960939/…–
— jedison
删除页边距并增加正文页边距为我生成了一个空白页。我将身体边缘更改为填充，并且它起作用了。
— 安德烈·吉马良斯·萨卡塔（AndréGuimarãesSakata）
21

我敢肯定，在您的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>

您可以访问此以了解更多有关此的信息

— 鲁迪亚斯
source
3
不。它不起作用。它就是设置边距。它仍在页眉和页
— 脚上
作品Chrome和Firefox，而不是IE 11
— 郑秀文
21

火狐：

  • 在中添加moznomarginboxes属性<html>

范例：

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
source
6
在Firefox 48发布（2016年8月）后，此功能将不再起作用：bugzilla.mozilla.org/show_bug.cgi?
— id=1260480
它对我来说不起作用，FF 61，但是@page {margin：0; }解决方案似乎也适用于FF。
— 纪子
11

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

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

解决方案（更多是hack）是在@page上设置负边距。

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

请注意，负边距对Y轴无效，仅对X轴有效

希望能帮助到你。

— 尼克·帕诺夫（Nick Panov）
source
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>
展开摘要

并用于Firefox

在Firefox中，https：//bug743252.bugzilla.mozilla.org/attachment.cgi ？id = 714383（查看页面源::标签HTML）。

在您的代码中，替换<html>为<html moznomarginboxes mozdisallowselectionprint>.

— 侯赛因·加姆
source
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— Sheak Abdulla
source
这似乎是正确的方法。即使就我而言，在iframe环境中，它的效果也很好。
— TwystO
2

这将是最简单的解决方案。我尝试了Internet上的大多数解决方案，但这仅对我有所帮助。

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
source
11
这什么也没做。
— 晚上
1

@page { margin: 0; }在Chrome和Firefox中可以正常工作。我还没有找到通过CSS修复IE的方法。但是您可以在自己的计算机上的IE中进入“页面设置”，并将页边距设置为0。按alt，然后按左上角的文件菜单，您将找到“页面设置”。一次只能在一台机器上使用...

— 三美
source
0

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所说的FireFox，

在示例中添加moznomarginboxes属性：

<html moznomarginboxes mozdisallowselectionprint>
— 尼希鲁斯
source
在上面的代码中，<div id =“ header” style =“ background-color：White;”> </ div> <div id =“ footer” style =“ background-color：White;”> </ div>是可选的。
— Nikhilus
0

我试图删除手动打印的html页面的页眉和页脚。

此页面上没有任何解决方案对我有用，而仅按照此处所述通过定义自己的页脚即可，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>
``
— 温克勒
source
-1

如果您恰好向下滚动到这一点，我找到了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>
— 约西亚
source
-3

您不必编写任何代码。在第一次调用window.print（）之前，更改浏览器的打印设置。例如在Firefox中：

  1. 按Alt或F10查看菜单栏
  2. 单击文件，然后单击页面设置
  3. 选择标签页边距和页眉/页脚
  4. 更改网址为空白-> 图片

另一个IE的示例（我在以前的版本中使用IE 11，您可以看到此阻止Firefox或Internet Explorer在每个页面上打印URL）：

  1. 按Alt或F10查看菜单栏
  2. 单击文件，然后单击页面设置
  3. 在“页眉和页脚”部分中，将URL更改为空。
— Alireza Azami
source
尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。- 评分
— SurvivalMachine
感谢您的建议SurvivalMachine。我在几分钟前编辑了答案：)
— alireza azami
嗯...我不想花太多时间在所有用户周围奔波并更新他们的浏览器（无论他们使用多少浏览器）来考虑这个应用程序，特别是如果他们生活在地球的另一端。另外，如果他们需要其他应用程序的设置，该怎么办？这不是答案。
— 保罗
这种方法缺少跨页面/应用程序提供的功能所提供的跨浏览器功能。
— killscreen '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.