在打印预览的每一页上添加不同的页脚答案

【问题标题】：Add different footer on every page in print preview在打印预览的每一页上添加不同的页脚
【发布时间】：2012-12-24 09:29:08
【问题描述】：

我有一个包含课程的页面，我想打印这个页面，我想在打印模式下的每个页面中添加页脚（当前课程名称、当前课程创建日期）。

<html>
<head>
<style>
.footer {
    display:none;
}
@media print {
.Lesson
{
page-break-after:always;
}
.footer {
    display:Block;
}
}
</style>
</head>
<body>
<div id="lesson1" class="Lesson">
lesson text
<div id="print-footer print-footer1" class="footer">footer 1 content</div>
</div>
<div id="lesson2" class="Lesson">
lesson text
<div id="print-footer print-footer2" class="footer">footer 2 content</div>
</div>
<div id="lesson3" class="Lesson">
lesson text
<div id="print-footer print-footer3" class="footer">footer 3 content</div>
</div>
<div id="lesson4" class="Lesson">
lesson text
<div id="print-footer print-footer4" class="footer">footer 4 content</div>
</div>
</body>
</html>

【问题讨论】：

我可以添加固定页脚，但不能在打印预览的每一页上添加不同的页脚。
我们可以看看你的代码吗？
是否可以在每一页上打印不同的页脚？
@OllyHodgson，请检查我的代码
@AmirSalah 部分问题可能是id="print-footer print-footer1"，这是无效的。 class 是一个以空格分隔的列表，而不是 id。

标签： jquery html css printing

【解决方案1】：

它在 css 中是不可能的选项。您需要使用其他语言进行动态变化取决于您的要求或使用 jquery。

这里是html

 <span>Hello</span>
 <div></div>
 <div></div>
 <div></div>

这里是jquery

 var htmlStr = $('span').html();
  $('div').text(htmlStr);

演示：jsfiddle

【讨论】：

是否可以在每一页上打印不同的页脚？
可能是。我没有尝试这种方法。你可以试试。但是类名应该相同。
我希望它处于打印模式而不是正常的 Html 预览

【解决方案2】：

这不是一个很好的方法，但它会起作用。您可以将所需的所有页脚 DIV 添加到每个页面，如下所示：

<div class="print-footer print-footer1">footer 1 content</div>
<div class="print-footer print-footer2">footer 2 content</div>
<div class="print-footer print-footer3">footer 3 content</div>
<div class="print-footer print-footer4">footer 4 content</div>
<div class="print-footer print-footer5">footer 5 content</div>

然后使用 CSS 隐藏它们：

.print-footer {
    display:none;
}

然后在每个页面的 BODY 标签中添加一个类，如下所示：

<body class="lesson1">
<body class="lesson2">
<body class="lesson3">
<body class="lesson4">
<body class="lesson5">

并在使用该 BODY 类打印时显示正确的页脚：

@media print {

body.lesson1 .print-footer1 {
    display:block;
}

body.lesson2 .print-footer2 {
        display:block;
}

body.lesson3 .print-footer3 {
        display:block;
}

body.lesson4 .print-footer4 {
        display:block;
}

body.lesson5 .print-footer5 {
        display:block;
}

}

【讨论】：

我想在页面底部添加页脚并想一次打印所有课程。

【解决方案3】：

我已经正确地重新阅读了您的问题，并尝试了以下方法：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Print footer test</title>
        <style>
        .print-footer {
            display: none;
        }
        @media print {
            /* put the page-break after the footer! */
            .print-footer {
                display:block;
                page-break-after: always;
            }
        }
        </style>
    </head>
    <body>
        <div class="lesson" id="lesson1">lesson 1 content</div>
        <div class="print-footer">footer 1 content</div>
        <div class="lesson" id="lesson2">lesson 2 content</div>
        <div class="print-footer">footer 2 content</div>
        <div class="lesson" id="lesson3">lesson 3 content</div>
        <div class="print-footer">footer 3 content</div>
    </body>
</html>

这适用于 Windows 上最新版本的 Firefox、Chrome 和 IE10 的打印预览。基本上，我在打印模式下显示打印页脚，并确保 page-break-after: always; 出现在 页脚之后，而不是课程。

请注意，一些旧版本的 Internet Explorer（当然还有其他浏览器）不能很好地支持打印 CSS，尤其是像 page-break-after 这样的东西，所以一定要彻底测试！

（另外，请确保您validate your HTML，否则您不能责怪浏览器出错。您缺少DOCTYPE、<title> 和您的id 属性无效-它们不能包含空格。）

【讨论】：