办公系统移动化改造关键技术研究

吕 梁 滕 舟 陈 晴

（浙江省气象信息网络中心，浙江 杭州 310017）

办公系统移动化改造关键技术研究

吕 梁 滕 舟 陈 晴

（浙江省气象信息网络中心，浙江 杭州 310017）

文章对企事业单位内网办公系统、门户网站进行移动化改造中的关键技术进行了深入的研究，其中包括安全接入系统、页面适配系统，常规网页HTML5改造，Word文件移动端转换和APP方案等方面。提出了一整套将基于传统电脑访问的系统转换为可以支持智能手机、平板电脑友好、高效访问的移动化平台系统的改造方法。文章提出的多种关键技术具有较好的实际操作性，能够支持大部分办公系统的移动化改造，对各种移动终端也具有较好的兼容性。

虚拟专用网页面适配HTML5改造Word转换APP客户端

1 引言

随着办公自动化进程的不断推进，各级部门负责人及业务人员在外出办公时对事务处理的移动化需求不断增加，传统的计算机办公自动化系统无法适应需求，需要一种能够随时随地获取重要信息并及时处理的新型系统与之适应。与此同时，伴随移动互联网和智能手机大潮的来袭，移动办公的概念应运而生，俨然成为一场办公革命，突破了对业务管理和事务处理的诸多限制。

然而，想要获得移动办公的能力却不是一件轻松的事情。目前企事业单位的内部办公系统、网站大部分架设于内部网络之上，外网及移动终端访问困难。大部分系统主要针对PC端用户开发，其中含有大量根据PC端、IE浏览器特别定制的插件、应用、设计，对移动终端存在一系列的兼容性问题。同时，大部分办公系统经历了多年的运行，有着海量的历史数据和深厚的用户基础，牵一发而动全身。如果另起炉灶建立一套全新系统，费时费力，这也是移动办公大范围推广道路上的绊脚石。

因此，研究如何建立一套可行的办公系统移动化改造方案，就有其现实意义。根据这一思想，本文从安全接入、页面适配、网页HTML5改造、Word文件转换和APP客户端开发等多个角度进行深入研究，聚焦移动化改造办公系统中的突出问题。如何既保留现有系统的历史数据和操作习惯，又增加对移动办公的整体支持，就成为了本文需要重点解决的问题。

2 安全接入系统

2.1 VPN技术的应用

内网办公系统移动化改造首先需要解决的是移动终端的安全接入问题，即如何随时随地安全地接入到企业内部网络并获得数据交互。由于办公系统通常架设在企业内网中，与internet及手机通信运营商网络处于物理隔离状态，这里需要使用VPN技术。

虚拟专用网VPN(Virtual Private Network)是在公众网络服务商ISP提供的网络（包括Internet，3G，4G网络等）基础设施上构建的一种安全的专用网络，能够以较低的成本在远程用户和局域网之间建立点对点连接[1]。

2.2 VPN协议分类

根据VPN使用的协议分类，从访问方式可以分为基于Web和基于客户端2个方面：

基于WEB:

安全套接层协议(SSL)SSL属于安全协议中的较高层级，其中较为常用的是以此为基础的WEB安全传输协议（HTTPS）。

基于客户端:

当前主流的手机操作系统（Android，IOS，Windows phone）原生支持以下三种VPN协议[2]，不需要额外安装VPN客户端：

①点到点隧道协议(PPTP)：PPTP建立在PPP协议基础上，是一种支持多协议VPN加强型安全协议；

②L2TP：数据包点到点连接安全协议；

③IPSec：以暗号的方式对IP包进行处理，并进行加密传输的协议。

2.3 VPN技术选择

使用VPN技术时，主要有采购VPN设备，架设或租用连接网络、配置相应的VPN策略以及客户端的培训和使用等工作。VPN技术具有以下不同的特性：

(1)访问方式

基于Web的SSL VPN方案仅需要浏览器访问特定的WEB并实现登录即可，适用于只需要简单访问内网WEB页面的用户；如果需要有较高访问权限，比如需要打开文件，运行程序等的情况，推荐使用具有更强功能的基于客户端（PPTP，L2TP，IPSec）的VPN。

(2)安全需求

由于各类协议加密算法和认证模式强度不同，如果仅需要较低的安全性需求，可以采用基于PPTP，L2TP客户端VPN方案，而对安全性需求较高的领域，请使用而基于IPSec或SSL VPN客户端VPN方案。

(3)协议支持

如果应用仅需要支持TCP/IP协议传输数据，可以采用IPSec或SSL VPN客户端方案。而对那些需要多协议支持的应用(如NetBEUI、TCP/IP、IPX/SPX等)，采用基于PPTP，L2TP的客户端VPN方案则更为适合。

最终我们实现的架构如图1所示：

图1 整体架构

3 页面适配系统

3.1 适配技术选择

图2 各类手机屏幕尺寸

如图2所示，不同的手机终端具有不同的按键布局、屏幕尺寸和像素分辨率。受限于手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。有两种办法可以让手机用户访问PC网页时具有良好的体验：

方案一是按照适配手机的原则新建一个网站，它独立于PC端网站（例如淘宝网www.taobao.com和手机淘宝网m. taobao.com）。系统则根据用户访问设备的标示码，提示用户切换。这种方案的优点是专门对移动设备进行了优化，从而能够获得更好的浏览体验。同时，由于手机浏览页面是按流量收费，在节约开支方面有一定的优势。劣势是用户需要记住两个地址，不具备统一易用性，还会另外增加开发维护成本。

另一种方案则是自适应切换，网站充分考虑到多终端访问的情况，预先准备好不同的页面布局来与之适应，能够实现单一域名。这类跨屏适配技术以HTML5为基础，预先完成对目标网页元素的分析和标记，根据用户手机终端的参数实时进行展现方式的最佳计算，最后利用页面重构和CSS渲染的方式将结果提交用户。

综合考虑各方面的因素，本文在对内部办公系统进行移动化改造时使用第二种方案。

3.2 网页适配改造

3.2.1 添加viewport元标签

在页面代码的最上端，添加标签：

viewport指的是网页的可视区域。由于手机屏幕宽度有限，viewport的宽度设定显得尤其重要，网页的高度则可以通过用户上下滚屏进行适应，也可以进行文字、标题栏的折行和伸缩[3]。Viewport与用户端浏览器的大小相互适应，浏览器的大小改变也会令Viewport改变页面布局。

在PC浏览器中，供网页显示的区域（除去边框、滚动条、工具栏）就是viewport。不同之处在于，手机是基于viewport来呈现页面的。用户进行页面放大缩小后，viewport是保持不变的，改变的是按比例缩放的页面内容。例如：在viewport设置相同的的情况下，手机页面的布局呈现与在PC端结果一致，仅仅是因为手机屏幕宽度限制，页面内容按比例进行了缩小。

由于android和iphone手机对多点缩放的支持，容易导致网页缩放太小使得手机显示混乱，相反缩放设置过大又会导致显示的字体和图片失真。因此，将initial-scale（初始化缩放比例参数）设置为1.0，网页默认打开时占满全部屏幕。

另外，对于那些较早版本的浏览器（主要是IE6和IE7），viewport的支持需要添加css3-mediaqueries.js这类脚本。

3.2.2 使用相对宽度和字体大小

在页面布局时，尽量不使用绝对性定义，比如绝对宽度布局和绝对宽度元素，这样页面可以根据设备信息动态调整。另外在CSS的使用方面，也不能使用指定的像素宽度width:xx px，而只能指定百分比的宽度width:xx%还有width:auto。对于字体的大小设定，需要使用相对大小em。例如：

以默认大小的0.8设定SMALL的字体大小。

3.2.3 使用流动布局（fluid grid）

流动布局[4]是指各类元素的位置不是固定的，可以根据展现形式的需要动态浮动，例如：

如果页面被宽度所限放不下三个元素，最后的元素就会被浮动到下方显示，不会出现水平滚动条。从而使得页面简洁，具有有专门定制的效果，较为适用于屏幕较小的使用场景。

另外，还需要尽量避免绝对定位（position:absolute）的使用。

3.2.4 使用CSS3选择加载

随着Media Query[4]加入到CSS3的设定序列，页面能够实现根据访问设备屏幕的宽度来选择性加载对应的CSS文件，举例如下：

当用户屏幕介于480px和700px，就加载small.css。

同时在单一CSS中也可以根据用户屏幕不同，使用多种@media设置，如：

当终端宽度小于300时取消浮动top块（float:none）、宽度自动调节（width:auto），listbar块取消显示（display:none）。

3.2.4 设置图片自适应（fluid image）

网页中还需要关注的是图片的自适应显示问题，如：

对于网页内陷入的视频文件同样有效，可以都将其改为：

另外，面对PC端缩放图片出现图像失真的问题，可以尝试使用IE的专有命令：

最后，如果对图片自适应有更高的要求，还可以做适配分辨率的图片，服务器端和客户端都有较多方法实现。

4 网页HTML5改造

4.1 HTML5概述

html5将JavasScript、CSS、html等三大技术进行深入融合，从而实现对手机、平板等设备终端的数据传输通道和用户操作接口支持[5]。它最大的优点就是不必为IOS和Android等不同的硬件平台开发不同的版本，html5可以通过css的样式来进行自适应。以下是开发HTML5的常用框架：

①轻量级框架jQuery Mobile：为所有的主流移动操作系统平台提供了高度统一的移动界面框架；

②重量级富框架Sencha Touch：将现有的ExtJS整合JQTouch和Raphael库，产品的界面风格与iPhone和Android等开发的原生App类似。

跨平台的PhoneGap：可以访问手机内部的应用程序和数据接口，并且是开源、免费的。实现了编写一次，云端运行。

4.2 HTML5页面改造技术

将HTML4改造为HTML5，主要流程有以下几个部分：

4.2.1 简化文件头代码段

在HTML5中简化了很多HTML4的头代码字段[6]，例如：

4.2.2 替换使用全新语义元素

新版HTML5中，这些标记被重新定义并简化，整儿网页的层结构清晰易读：

改造语义元素步骤如下[7]：

①将id为header的div元素，改为＜header＞元素：页面的页眉定义以及部分内容字段（导航条、搜索框和网页标识等）；

②将id为navigation的div元素，改为＜nav＞元素：主要为网页的导航模块和超链接内容；

③将id为footer的div元素，改为＜footer＞元素：网页的页脚注释，联系方式和版权介绍等；

④将侧边栏id为siderbar的div元素，改为＜aside＞元素：主要为侧边栏的附属类信息；

⑤将＜section＞元素包含侧边栏中的每个内容块：主要功能是文档的分段和分节标示；

⑥使用＜em＞标记内容中需要强调的部分，使用＜b＞标记需要着重指出的部分；

⑦给页面添加地标角色＜nav role="navigation"＞，可用的role值分别是：application、banner、complementary、contentinfo、form、main、navigation、search。

除此之外，HTML5还提供了更为丰富的几十个全新标签，使得页面更具可读性，使用这些标签对搜索的优化和页面执行效率都有很大的提升。

4.2.3 使用CSS3代替样式

使用全新的CSS3元素替换旧版HTML中的样式属性。如文字、颜色、间距等。

5 Word文件移动端转换

5.1 Word文件转换HTML技术

在原有的办公系统中，存在很多具有WORD附件的网页，如果想在移动终端中获得较好的阅读体验，就必须对此类WORD附件进行专门的转化。

主要的转换思路如下：

①逐一读取整个WORD文档，并将内容存入到字符串序列中；

②从字符串序列中获取文件的标题，并且封装成HTML格式，如＜html＞＜head＞＜title＞测试标题＜/title＞＜/head＞＜body＞；

③从字符串序列中搜查表格字段，记录相应的开始、结束表格偏移量，同时将表格内容等一并构造出HTML表格；

④从字符串序列中逐一获得文本内容的字体、大小，以字符属性不同为止，逐个构造相应的HTML字符串；

⑤将内含的制表回车符等单独构造HTML；

⑥将图片信息保存并构造显示相关图片的HTML（＜imgsrc='d://demo//test.jpg'/＞）。

如果需要使用第三方软件包，根据操作系统不同可以分为两类：WINDOWS平台使用jacob实现；LINUX平台使用poi实现。最终转换结果如图3：

图3 Word文件转为HTML效果

5.2 WINDOWS平台jacob实现

Java程序能够通过Jacob远程调用COM组件和Win32类库。Jacob使用windows平台的Jacob.dll动态链接库。它的兼容性较好，可以转换.doc和.docx。使用eclipse编译器，具体流程如下：

①到官网下载Jacob，并解压；

②引入jacob.jar包，将Jacob.jar添加到Libraries中；

③将Jacob.dll放至当前项目的“jrein”以及“C: WindowsSystem32”下面；

④编写程序并调试通过。

从结果可以看到，Jacob成功转换了WORD文件，结果中包含一个对应文件夹，存放了包含源图片在内的相关文件。

5.3 LINUX平台poi实现

LINUX平台可以使用poi工具。下载poi后在eclipse项目中引用jar包，如图4所示：

图4 项目需要引用的JAR包

程序编写并执行成功后，poi成功转换了对应的WORD文件，同样的也生成了相关的图片文件夹。

源代码中需要将“utf-8”改为“GB2312”以解决一些乱码问题：

serializer.setOutputProperty(OutputKeys.ENCODING, "utf-8");

FileUtils.writeStringToFile(newFile(tpFile),content, "utf-8");

6 APP客户端开发

有了以上基于WEB浏览器等瘦客户端方式访问内网应用的基础，就可以较为容易地开发基于APP客户端访问方式的应用。APP客户端访问方式可以极大地增强用户体验和程序运行效率。主要技术思路是APP客户端可以使用内嵌网页或者提供WEBSERVICE的方式访问后台服务器，数据传输可以使用XML、JSON或二进制等自定义封装包的形式。基于目前比较流行的IOS和Android系统，从开发的角度给出以下分析和建议：

6.1 IOS客户端

IOS主要应用于苹果公司的移动终端（iPhone、ipad），需要掌握Objective-c语言或者最新的Swift语言，开发环境需要有运行Mac OS的苹果电脑或者PC虚拟机（执行效率较低），开发工具为Xcode和IOS SDK[8]。另外，如果需要将软件发布至苹果的APP STORE以供随时下载使用，还需要付费购买IOS开发者账号。因此IOS客户端开发前期投入成本较高，但是优势在于IOS程序执行效率高，用户体验更佳。

6.2 Android客户端

Android支持大部分基于Android及深度定制系统的终端，可以说应用范围更广。Android客户端开发入门门槛较低，仅需要一台PC和安装AndroidSDK的eclipse软件即可完成[9]，使用的语言是JAVA，易于上手。但是由于JAVA程序的运行特点，Android APP执行需要JAVA虚拟机，存在对终端硬件要求较高、程序碎片化和执行效率较低等情况。当然，随着Android操作系统版本的提升和智能手机硬件的快速增强，以上问题正在逐步改善。

[1]王达.虚拟专用网（VPN）精解[M].北京：清华大学出版社，2004，5-8.

[2]Richard Tibbs,Edward Oakes.Firewalls and VPNs:Principles and Practices[M].Prentice Hal,2008,3-10.

[3]张亚飞.HTML5和RIA网站设计[M].北京：清华大学出版社，2011，56-57.

[4]Sergey Mavrody.HTML5和CSS3快速参考[M].北京：人民邮电版社，2013，20-23.

[5]Anselm Bradford,PaulHaine.深入理解HTML5：语义、标准与样式[M].北京：电子工业出版社，2013，10-12.

[6]石川.HTML5移动Web开发实战[M].北京：人民邮电出版社，2013，83-88.

[7]Chuck Hudson,TomLeadbetter,HTML5 Developer's Cookbook[M].Addison-Wesley Professional,2013,325-339.

[8]Jack Nutting,FredrikOlsson,DavidMark,JeffLaMarche.精通iOS开发[M].北京：人民邮电出版社，2014，5-20.

[9]Wei-Meng Lee.Beginning Android 4 application Development[M].Wrox,2012,30-45.

Research on Key Technologies for the Mobile Transformation of Office System

LV Liang，TEN Zhou，CHEN Qing
(Zhejiang Meteorological Information and Network Center,Hangzhou Zhejiang 310017,China)

Aimed at the mobile transformation of office system based on the intranet,this paper did many researches and made some innovative contributions in the following fields:security access system,page adaptation system,HTML5 transformation of the website,the mobile conversion of Word files and the APP solutions,etc.The paper offers a set of solutions on conversion system based on traditional computer access for a mobile platform can support the smart phone,tablet computer friendly and efficient accessing.Several key techniques are proposed in this paper is practical and a set of effective solution.They can support most of office systems and provide good support for all types of mobile terminal.

VPN;page adaptation;transformation of HTML5;conversion of Word;APP solutions

TP311

A

1008-1739（2015）07-67-6

定稿日期：2015-03-12