網頁打印,可以通過浏覽器的"打印"功能實現,但"打印模板"機制,卻是 IE 5.5 /6.0 以及 Netscape 6.0 所獨有的;准確一點, IE 5.5 只是一個機制雛形,在 IE 6.0 中才得以完全體現。IE 6.0 的打印功能模塊,在精確控制頁面邊界,文本間隔,以及打印的統一性上,功能更為完備。
通過創建打印模板,你可以精確控制:
網頁打印及預覽時的頁面風格與內容編排風格;
打印屬性,如自動為打印的頁面添加卷標或編號;
精確控制打印預覽界面的各個元素與變量。
通過打印模板,你可以:
自動為所有打印頁面添加固定內容,如公司標識,版權申明,或者指定廣告;
自定義頁面標頭與尾注等元素,比如頁碼或卷標;
指定打印歷史與任務;
書本化奇偶分頁映射打印......
打印模板機制是建立在動態 Html 語言基礎上的,涉及到主要兩個行為:DeviceRect, LayoutRect ,下面我們就這兩個行為深入地探討 IE 6.0 的打印機制。
另外需要說明的是,DHtml (動態超文本標識語言)的行為跟其他語言的"行為"一樣,都是一種應用編程接口,初始狀態下有自己的默認屬性,在一定的事件下,由用戶決定調用其承認的功能模塊,從而產生相對應的"行為"。而且,"行為"可以自己編寫,不過得以".htc"為其擴展名以供調用。
一.DeviceRect ,定義打印總體風格:
打印總體風格,包括為打印頁面添加如公司標識的固定內容(網頁上不一定有,只體現在打印紙張上或預覽頁面上,後同);打印頁面的顏色風格;打印頁面的邊緣屬性或圖案;等等。
$False$
在進行 DeviceRect 引用前,先得確定頁面風格,方法是用<Style>進行設置。
例一:我們來定制如下的打印模板(詳情見 1.htm):
8.5 inch 寬
11 inch 高
黃.色背景
1 pixel 寬的黑色實心左邊界
1 pixel 寬的黑色實心上邊界
4 pixels 寬的黑色實心右邊界
4 pixels 寬的黑色實心下邊界
所有邊界與紙張邊緣為 10 pixels 的距離
現在我們用 Style 進行設定,假設這個 Style 名為 Mystyle1:
<STYLE TYPE="text/CSS">
.Mystyle1
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
下面我們給出 DeviceRect 引用的完全頁面代碼,詳細頁面請看: 1.htm
<Html XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/CSS">
.Mystyle1
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD>
[11] [12]
<BODY>
<IE:DEVICERECT ID="page1" CLASS="Mystyle1" MEDIA="print">
</IE:DEVICERECT>
<IE:DEVICERECT ID="page2" CLASS="Mystyle1" MEDIA="print">
</IE:DEVICERECT>
</BODY>
</Html>
在這個頁面中,共進行了兩個 DeviceRect 引用。作為一種規則,每一個單獨的打印頁面,必須有一個相對應的 DeviceRect 標記,如果有 1000 個頁面,那就得有 1000 個 DeviceRect 標記!嚇住了?別擔心,後面我們會教你一個方法,讓所有的 DeviceRect 標記自動完成!
在上面的代碼中,ID 是標志屬性,不同的頁面必須有自己不同的標識;CLASS 引用了 Style 屬性;MEDIA 屬性則指明了本頁面的最終用途是進行打印;<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">這句話則是指輸入默認的行為,它們分別是 DeviceRect, LayoutRect。
二.LayoutRect ,定義頁面內容風格:
跟 DeviceRect 一樣,不同的頁面,要進行 LayoutRect 引用時都需要添加 LayoutRect 標記,其智能添加方法將在後面介紹; LayoutRect 與 DeviceRect 如果在同一個頁面中同時出現,則前者需放在後者之內;另外, LayoutRect 對內容風格的設定,也通過 Style 得以實現。
例二:我們來定制如下的內容風格的打印模板:(詳情見 2.htm)
5.5 inches 寬
8 inches 高
與打印紙張邊緣,四邊保持 1 inch 的寬度(加上頁面本身的邊緣寬度,為實際的打印邊緣寬度)
白色背景
1 inch 寬的虛線邊界
先定制名為 contentstyle 的風格:
<STYLE TYPE="text/CSS">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
</STYLE>
然後下面是進行引用的完整網頁代碼:
<Html><HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
-FAMILY: verdana"><STYLE TYPE="text/CSS">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
</STYLE>
</HEAD>
<BODY>
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.Html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</BODY>
</Html>
跟例一中的源代碼相比,例二中只是以 LayoutRect 代替了原來的 DeviceRect 標記;DeviceRect 定制的是模板整體風格,而 LayoutRect 定制的是具體內容的版面風格;LayoutRect 的 ID 屬性也具有唯一性; CONTENTSRC 屬性則指明了具體的將起作用網頁文件;CLASS 指明了風格的引用對象;跟 DeviceRect 不同,在進行 LayoutRect 引用時,必須在每個頁面指定 NEXTREC ,即依次排列的下一個內容風格,這裡的"下一個內容"用其頁面的相應 ID 進行標識,如本例中的 LayoutRect2 。
三.DeviceRect 與 LayoutRect 的協同作戰:
上面我們分別討論了 DeviceRect 與 LayoutRect 的作用與引用方法,現在我們來看一下,如何在同一個打印模板中進行定制與引用。
在每一個打印模板上,必然包含兩方面的內容,一個是整體的模板風格(DeviceRect),另一個是內容風格(LayoutRect);第一個打印頁面跟其他頁面是不同的,因為第一個頁面中必須指明 CONTENTSRC 屬性,而同一打印任務中的其他頁面不再需要進行 CONTENTSRC 的指定。
例三:(詳細情況見 3.htm)
下面是第一個頁面中的 DeviceRect 代碼:
<IE:DEVICERECT ID="page1" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.Html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT>
下面是其他頁面中的 DeviceRect 代碼:
<IE:DEVICERECT ID="page2" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT>
下面我們將 DeviceRect 與 LayoutRect 結合起來使用,頁面情況見 3.htm ,其源代碼如下:
<Html XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default"><STYLE TYPE="text/CSS">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
.Mystyle1
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
>border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<IE:DEVICERECT ID="page1" CLASS="Mystyle1" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.Html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT>
<IE:DEVICERECT ID="page2" CLASS="Mystyle1" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT>
</BODY>
</Html>
四.DeviceRect 與 LayoutRect 標記的動態自動添加:
前面我們說到,每個單獨的打印頁面都需要各自的 DeviceRect 與 LayoutRect 標記,那麼,如果我們有 1000 個頁面需要打印,是否就要在每個頁面上重復繁瑣的 Copy & Paste 操作?
答案是否定的,我們完全可以通過 JavaScript 腳本來完成這一繁瑣的工作。
要實現 Html 聲明的動態創建,關鍵在於<DIV> 標記的定義,下面是其定義規則。
<DIV ID="devicecontainer">
......
</DIV>
<DIV>與</DIV>之間,采用 insertAdjacentHtml() 方式,並主要利用了其 afterBegin 與 BeforeEnd 兩個變量,現在我們將第一個頁面"插入"到<DIV></DIV>之間:
devicecontainer.insertAdjacentHTML("afterBegin", newHtml);
具有繼承屬性的後續頁面,調用 beforeEnd 變量:
devicecontainer.insertAdjacentHTML("beforeEnd", newHtml);
要裝載 devicecontainer 頁面,還需在 <Body>中添加:
<BODY ONLOAD="addFirstPage()">
現在我們在 JavaScript 中添加包含前面詳細介紹的 LayoutRect 與 DeviceRect 元素,用到的命令是 addFirstPage() 。需要注意的是,newHtml 標記後使用的是雙引號,而 LayoutRect 與 DeviceRect 標記後的變量使用單引號。如下:
function addFirstPage() {AMILY: verdana">newHtml = "<IE:DEVICERECT ID=''devicerect1'' MEDIA=''print'' CLASS=''mystyle1''>";
newHTML += "<IE:LAYOUTRECT ID=''layoutrect1'' CONTENTSRC=''2.Html''" + "ONLAYOUTCOMPLETE=''onPageComplete()'' NEXTRECT=''layoutrect2''" + "CLASS=''contentstyle''/>";
newHtml += "</IE:DEVICERECT>";
devicecontainer.insertAdjacentHTML("afterBegin", newHtml);
}
細心的讀者一定會發現,LayoutRect 後出現了一個新的屬性:LayoutRect:onLayoutComplete ,這個屬性主要指定了 LayoutRect 停止響應的後續事件,如系統資源消耗殆盡而停止響應,或者 LayoutRect 指定的變量溢出。
好了,有了上面的原理,下面我們來編寫具有自動"插入"功能的 JavaScript 代碼:
function onPageComplete() {
if (event.contentOverflow) {
newHtml = "<IE:DEVICERECT ID=''devicerect" + (lastPage + 1) + "'' MEDIA=''print'' CLASS=''mystyle1''>";
newHtml += "<IE:LAYOUTRECT ID=''layoutrect" + (lastPage + 1) + "'' ONLAYOUTCOMPLETE=''onPageComplete()'' NEXTRECT=''layoutrect" + (lastPage + 2) + "'' CLASS=''contentstyle''/>";
newHtml += "</IE:DEVICERECT>";
devicecontainer.insertAdjacentHTML("beforeEnd", newHtml);
lastPage++;
}
在上面的代碼中,contentOverflow 代表的是由於頁面信息過長,本頁的 LayoutRect 停止響應,則直接跳到下一個頁面,讓 LayoutRect 重新定義下一個頁面的版面;onPageComplete() 則不管頁面是否過長,LayoutRect 是否停止響應,只要到了頁面尾部則自動跳到下一頁,這也是最常見的情況。
在編寫本腳本時,關鍵處在於保持清醒,不能讓任意一個變量出錯。其中,ID 不僅針對 DeviceRect 與 LayoutRect ,還為 NextRect 所引用,頁面指向不能出錯;當前頁面的頁碼應該是 lastPage+1 ,下一個頁面的頁碼應該是 lastPage+2 ;NextRect 標記需要下一個頁面的 LayoutRect 屬性支持,因此它的值應該為 "layoutRect"+(lastPage+2);打開第一個頁面時,這個 LastPage 初始值為 1 。
源文檔 <http://www.tukuz.com/edu/article/look/0652620145514176.htm>