| 使用样式动态创建页首、页脚和换页符 |
|
|
|
作者：佚名 文章来源：不详 点击数： 更新时间：2006-12-6 1:13:09  |
使用样式动态创建页首、页脚和换页符
使用样式动态创建页首、页脚和换页符
在仔细阅读一个讨论区的时候，我读到了一个开发人员提出的问题，他正在努力编程在HTML页面里自动创建页首和页脚并插入换页符。这还没有去考虑你的输出会是什么，因为弄清浏览器对空白、页面大小等的当前设置很难。然而，如果确实想要强制指定宽度和换页符，你也可以实现。
实现这一目的的一种方法是使用TABLE。在本文里，我将向你演示如何把页首和页脚动态地插到页面里，从而构成格式化的页面。（请注意：这里我使用 IE 6.0来测试代码。它也可以在5.0和更高版本的浏览器上使用，因为我使用了从IE 5.0以来STYLE元素都可以使用的@media伪类。）
实现这一功能最简单的方法是使用TABLE。然而，你的格式化的输出必须包括单独的行，而且它们不能超过打印页面的高度。此外，你的TABLE一定不能超过打印页面的宽度。由于你无法控制风景画或者肖像画，所以你必须进行一些假设。你要假定文档的方向是肖像画，左右边距是1"（2.54厘米），上下边距0.25"（0.64厘米），纸张的大小是8.5"（21.59厘米）X 11"（27.94厘米）。这就意味着输出的总宽度是6.5"（16.51厘米），所以你的TABLE宽度应该被设置为6.5in、无边界。在表格的顶端，你要创建两个隐藏的DIV，它们将作为页首和页脚。DIV有设定好的宽度和高度，overflow样式属性被设置为hidden（隐藏）。这就为你的输出打下了基础。为了创建换页符、页首和页脚，你必须在page load后面加入一些JavaScript。
创建格式化输出的想法是把页首和页脚DIVS复制到隐藏的行里。但是，你要把@media print的显示样式设置为inline。而且，你要把页首之前的TR的page-break-after样式属性设置为always。
在BODY onload事件期间，在所有的行里迭代，以确定行的offsetTop加上offsetHeight是否超过了页面可用的长度。可用长度是页面的长度减去页首、页脚、上下空白的总高度。所以，如果页首的高度和页脚的高度都是1”，那么上下的空白就是0.25"，页面的长度是11"，那么可用的宽度就是 8.5"：11 - (1 x 2) - (0.25 x 2) = 8.5。
下面就是实现这一任务的HTML代码：
＜html＞
＜head＞
＜title＞＜/title＞
＜style＞
@media print {
.hdrftr { display:inline; }
}
@media screen {
.hdrftr { display:none; }
}
＜/style＞
＜/head＞
＜body id="b1" style="width:6.5in;"＞
＜script for="b1" event="onload"＞
var trHeader = document.createElement("TR");
trHeader = tbl1.children[0].insertBefore(trHeader, tbl1.all["t1"][0]);
trHeader.style.height = "1in";
trHeader.className = "hdrftr";
var tdHeader = document.createElement("TD");
tdHeader = trHeader.appendChild(tdHeader);
var hdr = document.all["hdr"].cloneNode(true);
hdr = tdHeader.appendChild(hdr);
hdr.id = document.uniqueID;
hdr.style.display = "inline";
var page = 1;
for (var i = 0; i ＜ tbl1.all["t1"].length; i++) {
var trOfInterest = null;
if (parseInt(tbl1.all["t1"][i].offsetTop) +
parseInt(tbl1.all["t1"][i].offsetHeight) == (8.5 * screen.deviceYDPI * page))
{
trOfInterest = tbl1.all["t1"][i];
}
if (parseInt(tbl1.all["t1"][i].offsetTop) +
parseInt(tbl1.all["t1"][i].offsetHeight) ＞ (8.5 * screen.deviceYDPI * page)) {
trOfInterest = tbl1.all["t1"][i-1];
i--;
}
if (trOfInterest != null) {
trOfInterest.children[0].innerText += " changed";
trOfInterest.style.pageBreakAfter = "always";
var trFooter = document.createElement("TR");
trFooter = tbl1.children[0].insertBefore(trFooter,
trOfInterest.nextSibling);
trFooter.className = "hdrftr";
trFooter.style.height = "1in";
var tdFooter = document.createElement("TD");
tdFooter = trFooter.appendChild(tdFooter);
var ftr = document.all["ftr"].cloneNode(true);
ftr = tdFooter.appendChild(ftr);
ftr.id = document.uniqueID;
ftr.style.display = "block";
trFooter.style.position = "absolute";
trFooter.style.top = ((9 * page) + ((page - 1) * 1)) + "in";
trFooter.style.left = "0in";
var trHeader = document.createElement("TR");
trHeader = tbl1.children[0].insertBefore(trHeader,
trFooter.nextSibling);
trHeader.style.height = "1in";
trHeader.className = "hdrftr";
var tdHeader = document.createElement("TD");
tdHeader = trHeader.appendChild(tdHeader);
var hdr = document.all["hdr"].cloneNode(true);
hdr = tdHeader.appendChild(hdr);
hdr.id = document.uniqueID;
hdr.style.display = "inline";
page++;
}
var trFooter = document.createElement("TR");
trFooter = tbl1.children[0].appendChild(trFooter);
trFooter.className = "hdrftr";
trFooter.style.height = "1in";
var tdFooter = document.createElement("TD");
tdFooter = trFooter.appendChild(tdFooter);
var ftr = document.all["ftr"].cloneNode(true);
ftr = tdFooter.appendChild(ftr);
ftr.id = document.uniqueID;
ftr.style.display = "inline";
trFooter.style.position = "absolute";
trFooter.style.top = ((9 * page) + ((page - 1) * 1)) + "in";
trFooter.style.left = "0in";
}
＜/script＞
＜div id="hdr" style="display:none;width:6.5in;height:1in;"＞Header＜/div＞
＜div id="ftr"
style="display:none;width:6.5in;height:1in;left:0px;top:9.5in;"＞Footer＜/div＞
＜table id="tbl1"＞
＜tr id="t1"＞
＜td＞Test＜/td＞
＜/tr＞
＜tr id="t1"＞
＜td＞Test＜/td＞
＜/tr＞
...
＜/table＞
＜/body＞
＜/html＞
在查看上面的示例代码时，你会注意到页首和页脚是两个放在TABLE元素前面的DIV。TABLE tbl1包含多个TR。每一行都被标识为t1，以便使用all集合帮助在它们中间迭代。这个例子只能用于超过两行的页面。我创建了一个hdrftr，用来识别这些项目应该在什么时候显示。JavaScript代码则详细叙述了这个功能是如何被创建的。
首先，一个页首行被加到表格的顶端。然后，每个行都会被检查，以确定top坐标加上行的高度加上页脚的高度——1in * screen.deviceYDPI或者仅仅screen.deviceYDPI——达到或者超过可用的总高度。如果这个值符合可用的高度，那么当前的行就被设置为后面有一个换页符。如果这个值超过了可用高度，那么就会在前一行后面设置换页符。然后，相关的行后面就会加入一个页脚，而页脚后面接着就是页首。这一过程一直持续到所有的行都被检查到。最后，一个页脚行被加到表格的末端。页脚行包括有绝对位置，以防止浏览器无意中分页，而这可能会导致错误发生。而且，后面的每个页面都必须为我们另外添加的页首行做好准备：（页面 – 1）* 1，这里（页面 – 1）是后面的页面数，而1是页首的高度。
|
| 文章录入：wuyongjian 责任编辑：wuyongjian |
|
上一篇文章： 随机变更的Banner广告
下一篇文章： 弹出窗口全攻略 |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
