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

-4

我有包含课程的页面，我想要打印此页面并且我想为每个页面添加页脚以包含（当前课程名称，当前课程创建日期）模式。在打印预览的每个页面上添加不同的页脚

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

来源

2012-12-24 Amir Salah

我可以添加固定页脚，但不能在打印预览的每个页面上添加不同的页脚。 –

我们可以看看你的代码吗？ –

是否可以在每个页面上打印不同的页脚？ –

它在css中是不可能的选项。您需要根据您的要求使用其他语言来进行动态变化，或者使用jquery。

这里的HTML

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

这里jQuery的

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

DEMO：jsfiddle

来源

2012-12-24 10:07:03 Selvamani

是否可以在每个页面上打印不同的页脚？ –

可能是。我没有尝试这种方法。你可以试试。但班级名称应该相同。 – Selvamani

我希望它在打印模式下不在正常的Html预览中 –

这是不是一个伟大的方法，但它会工作。您可以您所需要的所有页脚的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; 
} 

}

来源

2012-12-24 10:22:33

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

我重读你的问题正确，并尝试以下操作：

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

此作品在打印预览在Firefox，Chrome和IE10在Windows的最新版本。基本上，我在打印模式下显示打印页脚，并确保page-break-after: always;在页脚后面，而不是教训。

请注意一些旧版本的Internet Explorer（并且毫无疑问，其他浏览器）不支持打印CSS，特别是像page-break-after这样的东西，所以请确保您完全测试！

（此外，还要确保你validate your HTML，否则你不能责怪浏览器把事办错了你就错过一个DOCTYPE，一个<title>和你id属性无效。 - 它们不能包含空格）

来源

2012-12-27 10:01:15

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

回答

相关问题