HTML打印html文档时所有页面中的页眉和页脚

Question

我创建了一个带有标题,一些内容和页脚的html页面.我试图获得HTML页面的打印,有2页.我在第一页获得了标题,在最后一页获得了页脚.

我真正需要的是在所有页面中显示的页眉和页脚,就像在word文档中一样.

我检查并发现使用thead和tfoot的表格格式,可以完成.它在firefox和IE中运行,但它不适用于chrome.这是一些webkit浏览器兼容性问题吗？

有没有其他方式兼容所有浏览器.

Answer 1

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

我会以此作为坚实的基础。

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