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

Answer 2

使用您使用打印介质类型激活的固定定位元素：

#header, #footer {
     display: none;
}
@media print
{
    #header, #footer {
         position: fixed;
         display: block;
         top: 0;
    }
    #footer {
         bottom: 0;
    }
}

（此处假设您的div元素的标识为header和footer）。

Answer 3

我遇到了同样的问题，并找到了最适合我的简单标签。

<table>
  <thead>
    <tr><td>
      content that should be printed as page header
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      content that will be spread over all pages consecutively
    </td></tr>
  </tbody>
</table>

该表在浏览器中看起来像一个简单的表，但在打印输出中，<thead>标记的内容在每个页面上重复。不需要CSS。

在Firefox 32，IE 11甚至MS Word 2010中测试过.Word不会将标记转换为“真实”页面标题，而是重复每页顶部的内容。（您可能必须切换到“页面视图”才能真正看到Word中的差异。）

Answer 4

上述答案都不是问题的答案。根据我的经验，目前没有单一的清洁解决方案。感觉像chrome有目的地避免这个bug。 https://bugs.webkit.org/show_bug.cgi?id=17205。

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

4 个答案: