蘇亞濤

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

?

PAGE模型在web前端打印的精確控制應(yīng)用研究

蘇亞濤

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

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

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

1　PAGE模型打印控制的原理

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

圖1　page 模型圖示

圖2　周邊緣

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

1.1突出可讀性，網(wǎng)頁(yè)打印不能簡(jiǎn)單的創(chuàng)建整個(gè)網(wǎng)頁(yè)的截圖，應(yīng)使網(wǎng)頁(yè)打印具有良好的可讀性，即要以呈現(xiàn)主要內(nèi)容(文字、圖片)為主。[2]19-20

1.2增強(qiáng)打印效率，為了節(jié)省打印時(shí)的碳粉，應(yīng)去除頁(yè)眉、頁(yè)腳、導(dǎo)航、背景等元素，并對(duì)頁(yè)面進(jìn)行反轉(zhuǎn)顏色。

1.3擴(kuò)展超鏈接，由于打印出來(lái)后，超鏈接文本是無(wú)法在紙張上突顯的，需要對(duì)超鏈接文本進(jìn)行擴(kuò)展。

1.4要精確的控制打印效果就應(yīng)該使用print css，不推薦使用瀏覽器插件方式實(shí)現(xiàn)打印。

2　打印控制的度量單位

網(wǎng)頁(yè)在屏幕輸出時(shí)主要以px、em或pt等邏輯單位，當(dāng)進(jìn)行打印輸出時(shí)則主要以cm或in(英寸)為主。[3]14由于屏幕與打印輸出的單位不同，就需掌握它們之間的換算關(guān)系，以DPI為96的屏幕為標(biāo)準(zhǔn)的px與cm的換算關(guān)系如下。

1inch = 2.54cm

1cm = 96/2.54≈37.80px

1px = 2.54/96≈0.0265cm

100px = 2.65cm

A4紙的標(biāo)準(zhǔn)尺寸為:

21.0cm×29.7 cm

在96DPI分辨率下,其對(duì)應(yīng)的像素尺寸大約為:

794px×1123px

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

3　應(yīng)用研究

文章以亳州學(xué)院公文發(fā)布系統(tǒng)為例，詳細(xì)介紹PAGE模型的打印的具體應(yīng)用。待打印網(wǎng)頁(yè)樣式如圖3，具體操作如下。

圖3　打印頁(yè)網(wǎng)頁(yè)效果

3.1添加打印樣式。

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

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

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

代碼說明：@media print里面的內(nèi)容只對(duì)打印出來(lái)的內(nèi)容有效，之外的內(nèi)容就是屏幕顯示的樣式。使用這種方法的一個(gè)問題是必須確保打印機(jī)樣式實(shí)際上確實(shí)覆蓋了主樣式表?？梢允褂?！important。[4]26

3.2網(wǎng)頁(yè)中各元素的打印控制。

(1)紙張?jiān)O(shè)置，包括大小、邊距、縱/橫打印等。

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

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

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

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

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

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

@page:right{

@bottom-left {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: "關(guān)于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; } }

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

(3)隱藏非打印元素。

隱藏頁(yè)眉、頁(yè)腳、導(dǎo)航條。

div_title {display: none;}

div_nav {display: none;}

div_footer{display: none;}

代碼說明：待打印網(wǎng)頁(yè)中頁(yè)眉區(qū)域(div_title)、導(dǎo)航(div_nav)、頁(yè)腳(div_footer)設(shè)置為打印時(shí)自動(dòng)隱藏。

(4)設(shè)置打印內(nèi)容的背景、字號(hào)、字體顏色。

body {color: #000;

background: #fff;}

h1 { color: black;}

h2 { color: gray; }

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

最終打印效果見圖4。

圖4　最終打印效果

結(jié)語(yǔ)

在Web應(yīng)用程序設(shè)計(jì)過程中，開發(fā)者不僅要在屏幕界面中進(jìn)行很好的設(shè)計(jì)，還要考慮實(shí)際工作中文檔打印的需求來(lái)進(jìn)一步增強(qiáng)Web應(yīng)用程序的實(shí)用性。通過PAGE模型重新構(gòu)建文檔在打印輸出的效果，具有一定的實(shí)用價(jià)值。

[1]李永鋒,谷川.一種模板化的Web打印方法的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2010(4).

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

[3]孫志剛.基于個(gè)性化WEB PAGE模型的研究和構(gòu)造[D].昆明理工大學(xué)，2000.

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

Class No.:TP311.1Document Mark：A

(責(zé)任編輯：蔡雪嵐)

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

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

1672-6758(2016)10-0046-3

TP311.1

A