7

我创建了一个带有页眉、一些内容和页脚的 html 页面。我试图打印 HTML 页面，结果有 2 页。我得到了第一页的页眉和最后一页的页脚。

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

我检查并发现使用带有thead和tfoot的表格格式，它可以完成。它可以在 Firefox 和 IE 中运行，但不能在 chrome 中运行。这是一些 webkit 浏览器兼容性问题吗？

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

更新：截至 2021 年 4 月，该错误仍处于打开状态https://bugs.webkit.org/show_bug.cgi?id=17205。正如SHAKU在下面提到的那样https://stackoverflow.com/a/34884220/2776433

4

4 回答 4

4

您可以使用“@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;
    }
}
于 2013-09-13T18:15:04.427 回答
2

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

<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 中的差异）。

于 2014-10-07T13:41:37.523 回答
2

使用通过打印媒体类型激活的固定定位元素：

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

（这里假设你有 idheader和div 元素footer）。

于 2013-09-23T08:05:29.817 回答
1

以上答案都不是所问问题的真正答案。根据我的经验，目前没有单一的清洁解决方案可用。感觉 chrome 是故意避免这个错误的。https://bugs.webkit.org/show_bug.cgi?id=17205。

于 2016-01-19T18:22:18.017 回答