HTML页眉和页脚在所有页面打印HTML文档时 [英] HTML Header and footer in all pages while printing html document

问题描述

我创建了一个带有页眉，一些内容和页脚的html页面。我试图获得HTML页面的打印，并且有2页。我在第一页获得了页眉，在最后一页获得了页脚。

我真正需要的是在页面文档中显示所有页面的页眉和页脚。

我检查并发现，使用thead和tfoot的表格格式，可以完成。
它在Firefox和IE中工作，但它不适用于Chrome。这是一些webkit浏览器兼容性问题??

是否有任何其他方式与所有浏览器兼容

解决方案

您可以使用@printcss媒体样式定义专门定位打印样式。这将允许您严格地为打印文档时和打印预览时创建单独的样式。

我将以此为基础开始。

  @media print {
 
 * {
 color：＃000！important; 
 -webkit-text-shadow：none！important; 
 text-shadow：none！important; 
 font-family：Times New Roman，Times，serif; 
背景：透明！重要; 
 -webkit-box-shadow：none！important; 
 box-shadow：none！important; 
 border：none！important; 
 font-weight：normal！重要; 
} 
 
 header，nav，footer {
 overflow：visible; 
} 
 
 .body {
 width：auto; 
 border：0; 
保证金：0 5％; 
 padding：0; 
 float：none！important; 
 
 
 $ ba，a：link，a：visited {
 
& [href]：after {
 content：（ attr（href））; 
 font-size：90％; 
} 
 
& [href ^ =javascript：]，
& [href ^ =＃] {
&：after {
内容：; 
 
 
 
 $ b abbr [title]：在{
 content：（attr（title））; 
} 
 
 pre，
 blockquote {
 border：1px solid＃999; 
 page-break-inside：avoid; 
} 
 
 thead {
 display：table-header-group; 
} 
 
 tr，
 img {
 page-break-inside：avoid; 
} 
 
 img {
最大宽度：100％！重要; 
} 
 
 @page {
保证金：0.5cm; 
} 
 
 p，
 h2，
 h3 {
孤儿：3; 
 widows：3; 
} 
 
 h2，
 h3 {
 page-break-after：avoid; 
} 
} 
  

I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.

What i really need is the header and footer to show in all the pages like in a word document.

I checked and found that using the table format with the thead and tfoot,it can be done. It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??

Is there any other way which is compatible with all browsers.

解决方案

You can target print styles specifically with the "@print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.

I would start with this as a solid base.

    @media print {

    * {
        color: #000 !important;
        -webkit-text-shadow: none !important;
        text-shadow: none !important;
        font-family: "Times New Roman", Times, serif;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: none!important;
        font-weight: normal!Important;
    }

    header, nav, footer {
       overflow:visible;
    }

    .body {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important;
    }


    a, a:link, a:visited {

        &[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;
        }

        &[href^="javascript:"],
        &[href^="#"] {
            &:after {
                content: "";
            }
        }
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

这篇关于HTML页眉和页脚在所有页面打印HTML文档时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！