1. 程式人生 > >利用JavaScript 實現Word簡單匯出功能

利用JavaScript 實現Word簡單匯出功能

最近專案中需要一個word匯出的功能,上網查了下相關資料,基本上都是基於Jacob或者POI等元件來實現,需要相關jar以及環境配置,如果不好好研究下,不是那麼好實現,這裡介紹一種單純利用javaScript就可以實現Word匯出的方法。

在專案中,我需要在流程結束時,把評審表匯出成word。但在匯出前使用者可以先預覽一下評審表,如下為評審表Web頁面(到時候要匯出的即為這個頁面內容)

因為評審表有word的模版,所以我把word模版另存為一個html格式(主要是保留樣式),再改成jsp,然後拿這個jsp檔案作為預覽頁面的開發基礎,在此頁面進行資料獲取之後就可以通過“匯出word”按鈕來進行匯出了。

匯出後的效果如下圖。(基本上一模一樣)

下面說說具體的程式碼以及實現方式

         2個主要檔案:WordExporter.jsword_out.jsp(都很小,js500行,jsp200行)

按鈕的程式碼:

<input id="export" type="button" style="position: absolute; right: 20px; top: 23px;" value="匯出Word"></input>//(有個id就行了,後面為他繫結個事件而已)

WordExporter.js:主要是建構函式、匯出事件以及基本的過濾器等等。引用此外掛之後,只要在業務邏輯js

檔案裡進行初始化建構函式即可,上程式碼:

var wordputter =  new $WordExporter("export",{//用於觸發事件的元素id	 action : "../exportWord/word_out.jsp", //必須	提交地址
		wordName :question_title,//必須	匯出word的名稱 預設名稱:未定義.doc
		outDiv : "body",	//必須	要匯出程式碼塊父容器物件或ID	要匯出DIV
		cssLinkId : "" ,	//非必須 有預設css	要匯出word格式LinkId;
		cssString :"",//非必須 有預設css,同時設定該屬性和cssLinkId,此屬性優先	 顯式傳入的css內容
		data:[],		//非必須附帶提交到後臺處理變數列表.格式:[{name:param,value:value}...] 
		filter:function(dataStr){return dataStr;}	//過濾器擴充套件介面  ,同時 必須有返回值 
 	});

通過上面的初始化基本上就可以把web匯出為word了。如果有模版的,可以像我上面說的匯出為html 再開發,這樣會保留基本樣式。如果樣式比較少可以直接寫在cssString引數後面,如果樣式比較多的話,為了不造成混亂,可以把那些樣式剪下到一個css檔案裡,然後在word_out.jsp裡面進行通過讀寫css檔案裡面的內容來實現樣式。上程式碼:

		//獲取部屬應用系統的絕對路徑
		EnvironmentUtil environmentUtil = EnvironmentUtil.getInstance();
		String storePath = environmentUtil.getAppPath()+"inms/exportWord/wordCss.css";
		
		//例項化字串緩衝類,大部分情況比StringBuffer快,比String拼接更快
		StringBuilder builder = new StringBuilder();
	    BufferedReader reader = null;
	    
	    try {
	    	reader = new BufferedReader(new InputStreamReader(new FileInputStream(storePath)));
	    	char[] chars = new char[4096];
	    	int length = 0;
	    	
	    	while (0 < (length = reader.read(chars))) {
	        	builder.append(chars, 0, length);
	    	}
	 
	    } finally {
	    	try {
	        	if (reader != null) reader.close();
	    	} catch (IOException e) {
	        	throw new RuntimeException(e);
	    	}
	    }

這裡還有一個比較重點的就是過濾器WordExporter.js裡面已經有一些基本的過濾了,像我在開發預覽頁面的時候遇到一些隱藏域或者一些不是隱藏域但是是一些和文件不相關的按鈕,比如我上面說的觸發事件的按鈕,如果沒有進行過濾,在匯出word之後,有值的隱藏域會把值也匯出來(但這可能不是我們想要的)而遇到按鈕什麼的,就會匯出為undefined,這時候正則表示式就派上用場了,正則表示式很強大,效率也高,但是要想學好卻很難(本人菜鳥一隻,勿噴!)

舉個很簡單例子:

<input id=”test” type=”hidden” style=”left:10px;display:none;right:10px”><input>
str = str.replace(/<INPUT[^>]*type=\”hidden\”[^>]*>/ig,””)。
str = str.replace(/<INPUT[^>]*style=\”[^>]*display:none[^>]*\”[^>]*>/ig,"");

解釋:前後2/為正則定界符,即表示式開始與結束。[^>]:非“>”的任意字元。*:匹配前面字元0次或者多次。\”:匹配雙引號。i:忽略大小寫。g:全域性匹配。

2句就可以把隱藏型別的input元素替換成””,這樣在匯出時就不會出現上面的情況了。大家也可以下載正則測試工具,挺好用的。

當然也可以用js或者就jquery來過濾,方法很多,看個人選擇了。

最後一步就是執行下載的程式碼:

response.setHeader("Content-disposition","attachment;filename=\""+new String((wordName+".doc").getBytes("gb2312"),"ISO8859-1") + "\"");

作為附件下載,檔名為初始化時傳進來的名稱,並進行編碼設定。