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