程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> IE6.0打印機制解析

IE6.0打印機制解析

編輯:.NET實例教程

網頁打印,可以通過浏覽器的"打印"功能實現,但"打印模板"機制,卻是 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>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved