辦公系統移動化改造關鍵技術研究

呂 梁 滕 舟 陳 晴

（浙江省氣象信息網絡中心，浙江 杭州 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