也谈WEB打印（五）：在IE的打印预览窗口中定义自己的用户接口 - 永红

公告

在上一篇文章《也谈WEB打印（四）：让我们的模板支持打印，并根据内容动态的生成页面》中，我们知道了如何获取源文档的页数，并且知道了如何让我们的模板支持打印，在这篇文章中，我们讨论如何让打印模板获取正确的页面设置参数，并如何在打印模板中设置我们自己的UI。首先，我们给打印模板加上页眉和页脚：

给打印模板加上页眉和页脚

<HEAD>

<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">

.lorstyle

{

width:5.5in;

height:8in;

margin:1in;

background:white;

border:1 dashed gray;

}

.pagestyle

{

background:#FFFF99;

border-left:1 solid black;

border-top:1 solid black;

border-right:4 solid black;

border-bottom:4 solid black;

width:8.5in;

height:11in;

margin:10px;

overflow:hidden;

}

.headerstyle

{

position:absolute;

top:.25in;

width:5.5in;

left:1in;

}

.footerstyle

{

position:absolute;

top:10.5in;

width:5.5in;

left:1in;

}

</STYLE>

var iNextPageToCreate = 1;

var bHeadersFootersAdded = false;

function AddFirstPage()

{

newHTML = "<IE:DEVICERECT ID='page1' MEDIA='print' CLASS='pagestyle'>";

newHTML += "<IE:LAYOUTRECT ID='layoutrect1' CONTENTSRC='document' ONLAYOUTCOMPLETE='OnRectComplete()' NEXTRECT='layoutrect2' CLASS='lorstyle'/>";

newHTML += "</IE:DEVICERECT>";

pagecontainer.insertAdjacentHTML("afterBegin", newHTML);

iNextPageToCreate = 2;

}

function OnRectComplete()

{

if (event.contentOverflow == true)

AddNewPage();

else if (bHeadersFootersAdded == false)

{

headfoot.textHead = printer.header;

headfoot.textFoot = printer.footer;

headfoot.url = dialogArguments.__IE_BrowseDocument.URL;

headfoot.title = dialogArguments.__IE_BrowseDocument.title;

headfoot.pageTotal = document.all.tags("DEVICERECT").length;

for (i = 1; i <= headfoot.pageTotal; i++)

{

headfoot.page = i;

AddHeaderAndFooterToPage(i);

}

bHeadersFootersAdded = true;

}

function AddNewPage()

{

document.all("layoutrect" + (iNextPageToCreate - 1)).onlayoutcomplete = null;

newHTML = "<IE:DEVICERECT ID='page" + iNextPageToCreate + "' MEDIA='print' CLASS='pagestyle'>";

newHTML += "<IE:LAYOUTRECT ID='layoutrect" + iNextPageToCreate + "' ONLAYOUTCOMPLETE='OnRectComplete()' NEXTRECT='layoutrect" + (iNextPageToCreate + 1) + "' CLASS='lorstyle'/>";

newHTML += "</IE:DEVICERECT>";

pagecontainer.insertAdjacentHTML("beforeEnd", newHTML);

iNextPageToCreate++;

}

function AddHeaderAndFooterToPage(pageNum)

{

newHeader = "<div class='headerstyle'>" + headfoot.htmlHead + "</div>";

newFooter = "<div class='footerstyle'>" +headfoot.htmlFoot + "</div>";

document.all("page" + pageNum).insertAdjacentHTML("afterBegin", newHeader);

document.all("page" + pageNum).insertAdjacentHTML("beforeEnd", newFooter);

}

</SCRIPT>

<HEAD>

<IE:TEMPLATEPRINTER ID="printer"/>

<IE:HEADERFOOTER ID="headfoot"/>

</DIV>

</BODY>

</HTML>

上面的模板演示了HEADERFOOTER元素的用处，并演示了如何给一个打印模板的页面添加页眉和页脚。他在BODY中增加了一个TEMPLATEPRINTER和一个HEADERFOOTER元素，每个页面有3个函数用来增加页眉和页脚，2个样式表来说明页眉和页脚的位置。在本模板中，增加页眉和页脚的工作出现在2个地方：第一处是OnRectComplete函数，一旦OnRectComplete生成了所有的LAYOUTRECT元素（那就是，当event.contentOverflow=false的时候），他就用页眉的格式化字符，文档的标题和URL初始化HeaderFooter行为，调用另外一个函数来计算页面的数量。OnRectComplete然后调用AddHeaderAndFooterToPage遍历所有的DEVICERECT以完成向每一个DEVICERECT添加页眉和页脚的实际工作，注意逻辑型变量bHeadersFootersAdded，尽管页眉和页脚按绝对位置放置，并且不会更改DeviceRect中的其他元素，当一个打印模板中DEVICERECT更改的时候，当前对LayoutRect行为的实现会重新组织LayoutRect，在这个重新初始化的时间内，每个LayoutRect的onlayoutcomplete事件会重复的触发，导致一个无限调用OnRectComplete的无限循环。变量bHeadersFootersAdded在第一次传递给页面的后就变为true，以阻止重新组织页面的时候增加页眉和页脚，处理这个问题的另一个方法就是在初始化LayoutRect的时候就添加页眉和页脚。页面总数在layout完成的时候添加。把上面的模板保存，然后运行我们在《也谈WEB打印（二）：简单的分析一下IE的打印原理并实现简单的打印和预览》中的例子，单击Preview，其效果如下：图中的“博客园-www.cnblogs.com”就是页眉。

HEADERFOOTER元素专门处理模板中的页眉和页脚。而通过TEMPLATEPRINTER则可以访问大部分的与页面设置有关的配置信息：如页边距，纸张走向等。上面的例子，仍然没有取得正确的页面配置信息，在下面的例子中，我们就来设置正确的页面大小和页边距：

取得正确的页面设置

<HEAD>

<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">

.lorstyle

{

width:5.5in;

height:8in;

margin:1in;

background:white;

}

.pagestyle

{

background:white;

border-left:1 solid black;

border-top:1 solid black;

border-right:4 solid black;

border-bottom:4 solid black;

width:8.5in;

height:11in;

margin:10px;

overflow:hidden;

}

.headerstyle

{

position:absolute;

top:.25in;

width:6in;

left:1in;

}

.footerstyle

{

position:absolute;

top:10.5in;

width:6in;

left:1in;

}

</STYLE>

var iNextPageToCreate = 1;

var oPageStyleClass;

var oLorStyleClass;

var oHeaderStyleClass;

var oFooterStyleClass;

// Returns the object corresponding to a named style rule

function FindStyleRule(styleName)

{

for (i = 0; i < document.styleSheets.length; i++)

{

for (j = 0; j < document.styleSheets(i).rules.length; j++)

{

if (document.styleSheets(i).rules(j).selectorText == styleName)

return document.styleSheets(i).rules(j);

}

function Init()

{

AddFirstPage();

oPageStyleClass = FindStyleRule(".pagestyle");

oLorStyleClass = FindStyleRule(".lorstyle");

oHeaderStyleClass = FindStyleRule(".headerstyle");

oFooterStyleClass = FindStyleRule(".footerstyle");

oPageStyleClass.style.width = printer.pageWidth/100 + "in";

oPageStyleClass.style.height = printer.pageHeight/100 + "in";

oLorStyleClass.style.marginTop = printer.marginTop/100 + "in";

oLorStyleClass.style.marginLeft = printer.marginLeft/100 + "in";

oLorStyleClass.style.width = (printer.pageWidth - (printer.marginLeft + printer.marginRight))/100 + "in";

oLorStyleClass.style.height = (printer.pageHeight - (printer.marginTop + printer.marginBottom))/100 + "in";

oHeaderStyleClass.style.left = printer.marginLeft/100 + "in";

oHeaderStyleClass.style.top = printer.unprintableTop/100 + "in";

oHeaderStyleClass.style.width = oLorStyleClass.style.width;

oFooterStyleClass.style.left = printer.marginLeft/100 + "in";

oFooterStyleClass.style.width = oLorStyleClass.style.width;

oFooterStyleClass.style.bottom = printer.unprintableBottom/100 + "in";

}

function CheckPrint()

{

switch (dialogArguments.__IE_PrintType)

{

case "Prompt":

if (printer.showPrintDialog())

PrintPrep();

break;

case "NoPrompt":

PrintPrep();

break;

case "Preview":

default:

break;

}

function AddFirstPage()

{

newHTML = "<IE:DEVICERECT ID='page1' MEDIA='print' CLASS='pagestyle'>";

newHTML += "<IE:LAYOUTRECT ID='layoutrect1' CONTENTSRC='document' ONLAYOUTCOMPLETE='OnRectComplete()' NEXTRECT='layoutrect2' CLASS='lorstyle'/>";

newHTML += "</IE:DEVICERECT>";

pagecontainer.insertAdjacentHTML("afterBegin", newHTML);

headfoot.textHead = printer.header;

headfoot.textFoot = printer.footer;

headfoot.url = dialogArguments.__IE_BrowseDocument.URL;

headfoot.title = dialogArguments.__IE_BrowseDocument.title;

headfoot.page = 1;

AddHeaderAndFooterToPage(1);

iNextPageToCreate = 2;

}

function OnRectComplete()

{

if (event.contentOverflow == true)

AddNewPage();

else

{

headfoot.pageTotal = document.all.tags("DEVICERECT").length;

for (i = 1; i <= headfoot.pageTotal; i++)

AddPageTotalToPages(i);

setTimeout("CheckPrint();", 100);

}

function AddNewPage()

{

document.all("layoutrect" + (iNextPageToCreate - 1)).onlayoutcomplete = null;

headfoot.page = iNextPageToCreate;

newHTML = "<IE:DEVICERECT ID='page" + iNextPageToCreate + "' MEDIA='print' CLASS='pagestyle'>";

newHTML += "<IE:LAYOUTRECT ID='layoutrect" + iNextPageToCreate + "' ONLAYOUTCOMPLETE='OnRectComplete()' NEXTRECT='layoutrect" + (iNextPageToCreate + 1) + "' CLASS='lorstyle'/>";

newHTML += "</IE:DEVICERECT>";

pagecontainer.insertAdjacentHTML("beforeEnd", newHTML);

AddHeaderAndFooterToPage(iNextPageToCreate);

iNextPageToCreate++;

}

function AddHeaderAndFooterToPage(pageNum)

{

newHeader = "<DIV CLASS='headerstyle'>" + headfoot.htmlHead + "</DIV>";

newFooter = "<DIV CLASS='footerstyle'>" +headfoot.htmlFoot + "</DIV>";

document.all("page" + pageNum).insertAdjacentHTML("afterBegin", newHeader);

document.all("page" + pageNum).insertAdjacentHTML("beforeEnd", newFooter);

}

function AddPageTotalToPages()

{

oSpanCollection = document.all.tags("span");

for (i = 0; i < oSpanCollection.length; i++)

{

if (oSpanCollection[i].className == "hfPageTotal")

oSpanCollection[i].innerText = headfoot.pageTotal;

}

function PrintPrep()

{

if (layoutrect1.contentDocument.readyState == "complete")

{

// This block will be called when printing with user prompt

// because the Print dialog box gives time for the content

// document to complete loading

PrintNow();

}

else

{

// This block will usually be called when printing w/o user prompt

// and sets an event handler that listens for the loading of the content

// document before printing. Sometimes, however, the content document

// will be loaded in time for the previous block to execute

layoutrect1.contentDocument.onreadystatechange = PrintWhenContentDocComplete;

}

function PrintWhenContentDocComplete()

{

if (layoutrect1.contentDocument.readyState == "complete")

{

layoutrect1.contentDocument.onreadystatechange = null;

PrintNow();

}

function PrintNow()

{

var startPage;

var endPage;

var oDeviceRectCollection = document.all.tags("DEVICERECT");

if (dialogArguments.__IE_PrintType == "NoPrompt" ||

printer.selectedPages == false)

{

startPage = 1;

endPage = oDeviceRectCollection.length;

}

else if (printer.currentPage == true)

{

// Determine current page, if necessary.

// Normally, the print current page option is disabled because a print

// template has no way of determining which section of a document is displayed

// in the browser and cannot calculate a current page. In print preview,

// a print template can enable the print current page option because the

// template can determine which page is currently showing in the print

// preview dialog. The print preview window would need a user interface

// with a print button so that the user could print from the print preview

// window. See template7.htm for an example showing how to add a user

// interface to a print preview template.

}

else

{

startPage = printer.pageFrom;

endPage = printer.pageTo;

if (startPage > endPage)

{

alert("Error: Start page greater than end page");

return;

}

if (startPage > oDeviceRectCollection.length)

{

alert("Error: Start page greater than number of pages in print job.");

return;

}

if (endPage > oDeviceRectCollection.length)

{

alert("Warning: End page greater than number of pages in print job. Continuing Print Job.");

endPage = oDeviceRectCollection.length;

}

printer.startDoc("Printing from Tmplt6.htm");

for (i = startPage - 1; i < endPage; i++)

printer.printPage(oDeviceRectCollection[i]);

printer.stopDoc();

}

</SCRIPT>

<HEAD>

<IE:TEMPLATEPRINTER ID="printer"/>

<IE:HEADERFOOTER ID="headfoot"/>

</DIV>

</BODY>

</HTML>

效果如下图：现在已经是正确的设置了。

本模板集成了前面所有的模板，并增强了打印支持。在以前的例子中，为了简单起见，我们假设了纸张的大小，页边距，非打印区域，被打印的页面等等。本模板就读取那些存储在“页面设置”和打印对话框中大部分实际的值来格式化打印和预览的页面，并仅仅打印用户希望的页面。一定要看看Init函数，样式表在这里被设置。因为打印机的计算单位是1/100英寸，所以，我们必须在使用前把这些值转换为英寸：除以100并在后面加上字符串“in”。

最后，我们开始最cool的技术，在打印预览街面上放置我们自己的UI控制界面：

定义自己的UI

<HEAD>

<?IMPORT NAMESPACE="ie" IMPLEMENTATION="#default">

.lorstyle

{

background:white;

margin-top:1in;

margin-left:1in;

width:6in;

height:8in;

}

.pagestyle

{

background:white;

border-left:1 solid black;

border-top:1 solid black;

border-right:4 solid black;

border-bottom:4 solid black;

width:8.5in;

height:11in;

margin:10px;

overflow:hidden;

left:-100in;

}

.headerstyle

{

position:absolute;

top:.25in;

width:6in;

left:1in;

}

.footerstyle

{

position:absolute;

top:10.5in;

width:6in;

left:1in;

}

#ui

{

height:60px;

background-color:red;

margin:0px;

padding;0px;

}

#zoomcontainer

{

zoom:50%;

width:100%;

position:relative;

}

#pagecontainer

{

width:100%;

overflow:auto;

border:'thin threedhighlight inset';

background:threedshadow;

}

</STYLE>

var iNextPageToCreate = 1;

var oPageStyleClass;

var oLorStyleClass;

var oHeaderStyleClass;

var oFooterStyleClass;

function FindStyleRule(styleName)

{

for (i = 0; i < document.styleSheets.length; i++)

{

for (j = 0; j < document.styleSheets(i).rules.length; j++)

{

if (document.styleSheets(i).rules(j).selectorText == styleName)

return document.styleSheets(i).rules(j);

}

function InitClasses()

{

oPageStyleClass.style.width = printer.pageWidth/100 + "in";

oPageStyleClass.style.height = printer.pageHeight/100 + "in";

oLorStyleClass.style.marginTop = printer.marginTop/100 + "in";

oLorStyleClass.style.marginLeft = printer.marginLeft/100 + "in";

oLorStyleClass.style.width = (printer.pageWidth - (printer.marginLeft + printer.marginRight))/100 + "in";

oLorStyleClass.style.height = (printer.pageHeight - (printer.marginTop + printer.marginBottom))/100 + "in";

oHeaderStyleClass.style.left = printer.marginLeft/100 + "in";

oHeaderStyleClass.style.top = printer.unprintableTop/100 + "in";

oHeaderStyleClass.style.width = oLorStyleClass.style.width;

oFooterStyleClass.style.left = printer.marginLeft/100 + "in";

oFooterStyleClass.style.width = oLorStyleClass.style.width;

oFooterStyleClass.style.top = null;

oFooterStyleClass.style.bottom = printer.unprintableBottom/100 + "in";

}

function Init()

{

AddFirstPage();

zoomcontainer.style.zoom = "50%";

ui.style.width = document.body.clientWidth;

ui.style.height = "60px";

pagecontainer.style.height = document.body.clientHeight - ui.style.pixelHeight;

oPageStyleClass = FindStyleRule(".pagestyle");

oLorStyleClass = FindStyleRule(".lorstyle");

oHeaderStyleClass = FindStyleRule(".headerstyle");

oFooterStyleClass = FindStyleRule(".footerstyle");

InitClasses();