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

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

css printing

Css 从window.print（）中删除页眉和页脚,css,printing,Css,Printing,我正在使用window.print（）打印页面，但我得到的页眉和页脚包含页面标题、文件路径、页码和日期。如何移除它们我也试过打印样式表 #header, #nav, .noprint { display: none; } 请帮忙。谢谢。在Chrome中，可以使用 @page { margin: 0; } 由于内容将扩展到页面的限制，因此页面打印页眉/页脚将不存在。当然，在这种情况下，您应该在body元素中设置一些边距/填充，这样内容就不会一直延伸到页面边缘。由于普通打印机无法进行无页边距打

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

我也试过打印样式表

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

请帮忙。谢谢。

在Chrome中，可以使用

@page { margin: 0; }

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

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

正如在一篇评论中指出的，如果页面有一个长元素滚动超过一页（就像一个大表格），那么边距将被忽略，打印的版本将看起来很奇怪

在给出这个答案的时候（2013年5月），它只在Chrome上起作用，现在还不确定，再也不需要尝试了。如果您需要对无法访问的浏览器的支持，您可以动态创建PDF并打印（您可以创建一个嵌入JavaScript的自打印PDF），但这是一个巨大的麻烦。

我相信在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>


@页面
{
大小：auto；/*auto是初始值*/
边距：0mm；/*这会影响打印机设置中的边距*/
}

Firefox:

<html moznomarginboxes mozdisallowselectionprint>

示例：

<html moznomarginboxes mozdisallowselectionprint>

CSS标准支持一些高级格式。CSS中有一个@page指令，它允许某些仅适用于分页媒体（如纸张）的格式设置。看见


打印测试
@页面
{
大小：auto；/*auto是当前打印机页面大小*/
边距：0mm；/*这会影响打印机设置中的边距*/
}
身体
{
背景色：#FFFFFF；
边框：实心1px黑色；
边距：0px；/*打印前内容上的边距*/
}
顶线
第2行

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

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

解决方法（更像是一种黑客行为）是在@page上加上负边距

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

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

希望有帮助。

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

按Alt或F10以查看菜单栏

单击文件，然后单击页面设置

选择“页边距和页眉/页脚”选项卡

更改空白的URL->

IE的另一个例子是（我在以前的版本中使用IE 11，你可以看到这一点）：

按Alt或F10以查看菜单栏

单击文件，然后单击页面设置

在页眉和页脚部分，将URL更改为空

1.用于铬合金和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>


函数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=打印内容；
window.print（）；
document.body.innerHTML=原始内容；
}

对于FireFox，正如l2aelba所说的那样

在中添加MozNoMarginBox属性例如：

<html moznomarginboxes mozdisallowselectionprint>

@媒体打印{
.页脚，
#不可打印{
显示：无！重要；
}
#可打印{
显示：块；
}
}

如果您恰好向下滚动到这一点，我找到了Firefox的解决方案。它将打印不带页脚和页眉的特定div中的内容。您可以根据需要进行自定义

首先，下载并安装此加载项：

其次，编写此函数：

<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>


函数PrintElem（elem）
{
var mywindow=window.open（“”，'PRINT'，'height=400，width=600'）；
mywindow.document.write（“”+document.title+“”）；
mywindow.document.write（“”）；
mywindow.document.write（elem）；
mywindow.document.write（“”）；
mywindow.document.close（）；//对于IE>=10是必需的
mywindow.focus（）；//IE>=10所必需的*/
//jsPrintSetup.setPrinter（'PDFCreator'）；//如果需要，请设置打印机
jsPrintSetup.setSilentPrint（1）；
//已发送空页眉
jsPrintSetup.setOption（'headerStrLeft'，''）；
jsPrintSetup.setOption（'headerStrCenter'，''）；
jsPrintSetup.setOption（'headerStrRight'，''）；
//设置空页脚
jsPrintSetup.setOption（'footerStrLeft'，''；
jsPrintSetup.setOption（'footerStrCenter'，''；
jsPrintSetup.setOption（'footerStrRight'，''；
//静静地打印我的窗口。
jsPrintSetup.printWindow（mywindow）；
jsPrintSetup.setSilentPrint（1）；//如果需要打印对话框，请更改为0
mywindow.close（）；
返回true；
}

第三，在您的代码中，无论您想在哪里编写打印代码，都要这样做（我使用了JQuery，您可以使用纯javascript）：


$（“#打印”）。单击（函数（）{
var contents=$（“#yourDivToPrint”）.html（）；
印刷元素（目录）；
})

显然，您需要链接才能单击：

<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键，然后按左上角的“文件”菜单，您将看到页面设置。这只适用于

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;
      }
}