Question

我想准备一个必须拆分为A4页面的打印页面。这个页面必须有页眉和页脚。

此页面增加3个表格。第一个表是标题第二个表是内容第三个表是页脚。

必须将内容拆分为第二个表（我将其称为“内容表”）。

例如：

如果内容包含此行（我们确定内容表高度= 600之前）

<tr height="100"><td> row1 </td></tr>
<tr height="300"><td> row2 </td></tr>
<tr height="150"><td> row3 </td></tr>
<tr height="100"><td> row3 </td></tr>
<tr height="250"><td> row3 </td></tr>

前3行必须在第一个打印页面中，其他2行必须在第二个打印页面中。

就像那样：

第一页打印页面：

< Header table >
</ Header table >
< Context table >
  <tr height="100"><td> row1 </td></tr>
  <tr height="300"><td> row2 </td></tr>
  <tr height="150"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >

第二页：

< Header table >
</ Header table >
< Context table >
  <tr height="100"><td> row3 </td></tr>
  <tr height="250"><td> row3 </td></tr>
</ Context table >
< Footer table >
</ Footer table >

我之前使用jQuery height（）函数。我测量了所有行的高度，并将它们与内容表高度（600）进行了比较。然后我用document.write函数分割行后写出打印页面。但是长篇文章很慢。

我想用另一种更好的方法再做一遍。我怎样才能做到这一点？我希望你理解我的问题。

Answer 1

http://w3schools.com/cssref/pr_print_pageba.asp http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

只需使用CSS。

对于页眉和页脚，您可以使用position：fixed。标题：顶部：0px 页脚：底部：0px;

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>

您可以为与页眉/页脚大小匹配的内容添加页边距，因此不会覆盖。

页眉和页脚的分页

1 个答案: