解析IE6.0印表機制(轉)

來源:互聯網
上載者:User
列印 網頁列印,可以通過瀏覽器的"列印"功能實現,但"列印模板"機制,卻是 IE 5.5 /6.0以及 Netscape 6.0 所專屬的;準確一點, IE 5.5 只是一個機制雛形,在 IE 6.0 中才得以完全體現。IE 6.0的列印功能模組,在精確控制頁面邊界,文本間隔,以及列印的統一性上,功能更為完備。
 

  通過建立列印模板,你可以精確控制:
 

網頁列印及預覽時的頁面風格與內容編排風格;列印屬性,如自動為列印的頁面添加卷標或編號;精確控制預覽列印介面的各個元素與變數。

  通過列印模板,你可以:

自動為所有列印頁面添加固定內容,如公司標識,著作權申明,或者指定廣告;自訂頁面標題與章節附註等元素,比如頁碼或卷標;指定列印曆史與任務;書本化奇偶分頁映射列印......
 

  列印模板機制是建立在動態超文字標記語言 語言基礎上的,涉及到主要兩個行為:DeviceRect,LayoutRect ,下面我們就這兩個行為深入地探討 IE 6.0 的印表機制。

  另外需要說明的是,DHTML(動態超文本標識語言)的行為跟其他語言的"行為"一樣,都是一種應用編程介面,初始狀態下有自己的預設屬性,在一定的事件下,由使用者決定調用其承認的功能模組,從而產生相對應的"行為"。而且,"行為"可以自己編寫,不過得以".htc"為其副檔名以供調用。

  一.DeviceRect ,定義列印總體風格:

列印總體風格,包括為列印頁面添加如公司標識的固定內容(網頁上不一定有,只體現在列印紙張上或預覽頁面上,後同);列印頁面的顏色風格;列印頁面的邊緣屬性或圖案;等等。

在進行 DeviceRect 引用前,先得確定頁面風格,方法是用<Style>進行設定。

例一:我們來定製如下的列印模板

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 引用的完全頁面代碼
 

<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>
<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 得以實現。

例二:我們來定製如下的內容風格的列印模板

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">
<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 的指定。
 

例三:

下面是第一個頁面中的 DeviceRect 代碼:
 

<IE:DEVICERECT ID="page1" CLASS="masterstyle"MEDIA="print">



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。