PAGE模型在web前端打印的精確控制應用研究

蘇亞濤

(亳州學院 電子與信息工程系，安徽 亳州　236800)

?

PAGE模型在web前端打印的精確控制應用研究

蘇亞濤

(亳州學院 電子與信息工程系，安徽 亳州236800)

目前，大部分應用軟件都是基于web的應用程序，在實際工作過程中，將web應用中的文檔輸出至打印機是非常普遍的。當前普遍的Web應用程序往往更加注重對屏幕的輸出而不是打印機。因此在web應用程序中對文檔進行精確的打印輸出是非常實用和必要的。針對這一問題運用PAGE模型對web前端打印控制的方法進行研究與實現。

PAGE模型；web精確打印；CSS樣式

1　PAGE模型打印控制的原理

PAGE模型(PAGE BOX)是指將頁面映射到一個矩形平面(如圖1)，可以把這個矩形平面想像成一個WORD頁，在矩形平面中可以設置頁面的各個方面，如頁面的尺寸、頁邊距，頁眉、頁腳等。[1]31-32頁面模型定義了頁面區域，然后劃分了16個周邊緣盒(如圖2)，用來控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的余量的尺寸。

圖1　page 模型圖示

圖2　周邊緣

在PAGE BOX模型中，需要注意以下幾方面。

1.1突出可讀性，網頁打印不能簡單的創建整個網頁的截圖，應使網頁打印具有良好的可讀性，即要以呈現主要內容(文字、圖片)為主。[2]19-20

1.2增強打印效率，為了節省打印時的碳粉，應去除頁眉、頁腳、導航、背景等元素，并對頁面進行反轉顏色。

1.3擴展超鏈接，由于打印出來后，超鏈接文本是無法在紙張上突顯的，需要對超鏈接文本進行擴展。

1.4要精確的控制打印效果就應該使用print css，不推薦使用瀏覽器插件方式實現打印。

2　打印控制的度量單位

網頁在屏幕輸出時主要以px、em或pt等邏輯單位，當進行打印輸出時則主要以cm或in(英寸)為主。[3]14由于屏幕與打印輸出的單位不同，就需掌握它們之間的換算關系，以DPI為96的屏幕為標準的px與cm的換算關系如下。

1inch = 2.54cm

1cm = 96/2.54≈37.80px

1px = 2.54/96≈0.0265cm

100px = 2.65cm

A4紙的標準尺寸為:

21.0cm×29.7 cm

在96DPI分辨率下,其對應的像素尺寸大約為:

794px×1123px

這里要特別注意的是：由于不同的DPI下對應的像素是不同的，要保證效果的一致性,必須使用物理單位來定義打印頁面。

3　應用研究

文章以亳州學院公文發布系統為例，詳細介紹PAGE模型的打印的具體應用。待打印網頁樣式如圖3，具體操作如下。

圖3　打印頁網頁效果

3.1添加打印樣式。

添加打印樣式時，可以為待打印頁面分別設計屏幕和打印兩個不同的CSS樣式文件，也可以將屏幕和打印控制都寫于一個CSS樣式文件中，下面以后者為例。

直接把屏幕顯示樣式和打印樣式寫在一個css文件中：

@media print {}{……//樣式代碼}

代碼說明：@media print里面的內容只對打印出來的內容有效，之外的內容就是屏幕顯示的樣式。使用這種方法的一個問題是必須確保打印機樣式實際上確實覆蓋了主樣式表。可以使用！important。[4]26

3.2網頁中各元素的打印控制。

(1)紙張設置，包括大小、邊距、縱/橫打印等。

@page {size: 5.5in 8.5in;}//紙張大小:5.5英寸寬,8.5英寸高

@page { size: A4;}//紙張大小為A4

@page { size: A4 portrait;}//縱向打印

@page :left { margin-left: 30cm;} //設置左邊距

@page :right { margin-left: 4cm;} //設置右邊距

(2)設置打印頁面的頁眉頁腳。

@page:right{

@bottom-left {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: "關于2014***的通知";

font-size: 9pt;

color: #333; }

@bottom-right {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: counter(page);

font-size: 9pt; }

@top-right {

content: “公文詳情”;

margin: 30pt 0 10pt 0;

font-size: 9pt;

color: #333; } }

代碼說明：分別設置打印頁的頁眉(top-right)顯示“公文詳情”字樣，頁腳(bottom-left、bottom-right)左側為“關于2014***的通知”字樣，右側為頁碼。

(3)隱藏非打印元素。

隱藏頁眉、頁腳、導航條。

div_title {display: none;}

div_nav {display: none;}

div_footer{display: none;}

代碼說明：待打印網頁中頁眉區域(div_title)、導航(div_nav)、頁腳(div_footer)設置為打印時自動隱藏。

(4)設置打印內容的背景、字號、字體顏色。

body {color: #000;

background: #fff;}

h1 { color: black;}

h2 { color: gray; }

代碼說明：“body”為設置打印頁面的背景為白色，字顏色為黑色；“h1和h2”設置文章內容字體顏色，這里代碼僅從顏色設置，讀者可以根據情況設置字體、字號。

最終打印效果見圖4。

圖4　最終打印效果

結語

在Web應用程序設計過程中，開發者不僅要在屏幕界面中進行很好的設計，還要考慮實際工作中文檔打印的需求來進一步增強Web應用程序的實用性。通過PAGE模型重新構建文檔在打印輸出的效果，具有一定的實用價值。

[1]李永鋒,谷川.一種模板化的Web打印方法的設計與實現[J].計算機應用與軟件，2010(4).

[2]林振洲. ActiveReports在WEB打印中的應用[J].電腦知識與技術，2013(23).

[3]孫志剛.基于個性化WEB PAGE模型的研究和構造[D].昆明理工大學，2000.

[4]李大光.B/S模式WEB精確打印控制的技術研究[J].信息系統工程，2014(4).

Class No.:TP311.1Document Mark：A

(責任編輯：蔡雪嵐)

Application of PAGE Model in the Precise Control of Web Front End Printing

Su Yatao

(Department of Electronics and Information Engineering, Bozhou College, Bozhou, Anhui 236800，China)

At present, most of the application software are based on the application of web, in the actual work process, the web application in the document output to the printer is very common. Current popular Web applications tend to pay more attention to the output of the screen instead of the printer. So it is very useful and necessary to make the exact print out of the document in the web application. In this paper, the PAGE model is used to research and implement the web front end printing control method.

PAGE model; Web precise printing; CSS style

蘇亞濤，碩士，講師，亳州學院電子與信息工程系。

1672-6758(2016)10-0046-3

TP311.1

A