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

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

jquery html css printing

Jquery 在打印预览的每个页面上添加不同的页脚,jquery,html,css,printing,Jquery,Html,Css,Printing,我有一个包含课程的页面，我想打印此页面，我想在打印模式下为每个页面添加页脚（当前课程名称、当前课程创建日期） <html> <head> <style> .footer { display:none; } @media print { .Lesson { page-break-after:always; } .footer { display:Block; } } </style> </head> <body>

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

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


.页脚{
显示：无；
}
@媒体印刷品{
课程
{
分页符后：始终；
}
.页脚{
显示：块；
}
}
课文
页脚1内容
课文
页脚2内容
课文
页脚3内容
课文
页脚4内容

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

这里是html

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

演示：

这不是一个很好的方法，但它会起作用。您可以向每个页面添加所需的所有页脚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>

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

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

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

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

我已经仔细阅读了你的问题，并尝试了以下方法：

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


打印页脚测试
.打印页脚{
显示：无；
}
@媒体印刷品{
/*把分页符放在页脚后面*/
.打印页脚{
显示：块；
分页符后：始终；
}
}
第1课内容
页脚1内容
第2课内容
页脚2内容
第3课内容
页脚3内容

这可以在Windows上最新版本的Firefox、Chrome和IE10的打印预览中使用。基本上，我在打印模式下显示一个打印页脚，并确保

分页符在：始终位于页脚后面，而不是课程后面
请注意，一些旧版本的Internet Explorer（毫无疑问还有其他浏览器）不太支持打印CSS，特别是像在之后分页符之类的东西，所以请确保您进行了彻底的测试
（另外，请确保您的DOCTYPE
、
和id
属性无效，不能包含空格。）
我可以在打印预览中添加固定页脚，但不能在每页上添加不同的页脚。我们可以查看您的代码吗？是否可以在每页上打印不同的页脚？@OllyHodgson，请检查我的code@AmirSalah部分问题可能是无效的id=“print footer print-footer1”
class
是一个空格分隔的列表，而不是id。是否可以在每页上打印不同的页脚？可能是。我没有尝试这种方法。你可以试试。但类名应该是相同的。我希望它在打印模式下，而不是在正常的Html预览中。我希望在页面底部添加页脚，并希望一次打印所有课程。
<!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>