Question

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

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

Answer 1

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

这里是html

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

这里是jquery

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

DEMO：jsfiddle

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

}

Answer 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>和{{1}属性无效 - 它们不能包含空格。）

在打印预览中的每个页面上添加不同的页脚

3 个答案: