当前位置: 代码迷 >> JavaScript >> javascript上用ActiveXObject控件替换word书签,将内容导出到word后打印
  详细解决方案

javascript上用ActiveXObject控件替换word书签,将内容导出到word后打印

热度:274   发布时间:2012-11-06 14:07:00.0
javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印

最近有需求将数据导出到word里,然后编辑打印。?
想过几种方案:?
1.使用jacob。?
2.使用apache的poi。?
3.使用itext。?
由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决。?

前提条件:?
1.浏览器安全级别降低,可以使用ActiveXObject控件。?

2.装有office word。?

目前实现了替换单个书签,多行表格书签,和图片,基本上满足需求。不过还有很多操作word的使用方法不太清楚,网上大部分都使用的VB,有不清楚的地方,大家可以交流。?

下面说一下我的设计实现思路:?

首先当然是定义word模板,在需要替换的地方加上标签。 菜单-插入-书签,输入属性名,如year,date,pic1,voList等等。?
打印页面:?
需要把打印的数据从后台取出,以单个vo(一个对象)为一组,或以voList(对象的列表集合)为一组 组织好页面上 再得到这些数据后进行替换。?
数据组织形式如下:?
<div id="export2word">

<form id="singleVo" name="singleVo"> 
<textarea name="jcxcrs" style="display:none"><c:out value="${zywstjfxbgVO.jcxcrs }"/></textarea> 
<textarea name="xcjhl" style="display:none"><c:out value="${zywstjfxbgVO.xcjhl }"/></textarea> 
<textarea name="tbjcxcrs" style="display:none"><c:out value="${tbjcxcrs }"/></textarea> 
<textarea name="tptest" style="display:none">../zwgl/zw008-ZwMkjbxxCTRL-showWxytp.png?xh=3041</textarea> 
</form> 

<c:forEach var="mxvo" items="${jgList}" varStatus="s"> 
<form name="mxvoForm"> 
<!-- 注:这里的宽度设置为表格单元格宽度(厘米*100)--> 
<textarea name="tbjcmcrs" style="width:349;display:none"><c:out value="${mxvo.tbjcmcrs }"/></textarea> 
<textarea name="tbjcmcrsbl" style="width:270;display:none"><c:out value="${mxvo.tbjcmcrsbl }"/></textarea> 
<textarea name="tbjcxcrs" style="width:477;display:none"><c:out value="${mxvo.tbjcxcrs}"/></textarea> 
<textarea name="tbjcxcrsbl" style="display:none"><c:out value="${mxvo.tbjcxcrsbl }"/></textarea> 
</form> 
</c:forEach> 
</div> 

使用: 
<input type="button" id="select2" name="select2" class="button" value="导出数据" onclick="print2doc();"> 

<script type="text/javascript" src="../public/scripts/export2word.js"></script> 
<script type="text/javascript"> 
function print2doc(){ 
//参数为模板(与页面的相对)路径 
var word = new WordApp("test.doc"); 
//参数为form名,vo中需要添加的属性(为空时form里所有属性) 
var vo = word.getSingleVo("singleVo",["jcxcrs","xcjhl","tbjcxcrs"]); 
//var vo = word.getSingleVo("singleVo"); 
//组织成的图片vo 
var tpvo = word.getSingleVo("singleVo",["tptest"]); 
//参数为 form名,需要添加的属性(顺序为生成表格列的顺序,为空时form里的所有属性和顺序) 
var voList = word.getVoList("mxvoForm",["tbjcmcrs","tbjcmcrsbl","tbjczsrs"]); 
//var voList = word.getVoList("mxvoForm"); 
//替换普通书签 
word.replaceBookmarkUsevo(vo); 
//替换图片书签 
word.replaceBookmarkUsepicvo(tpvo); 
//替换书签jgList,画出表格形成多行数据。 
word.replaceBookmarkUsevolist("jgList",voList); 
//文档可见 
word.wordObj.visible=true; 
//word.closeApp(); 
} 
</script> 

?注意:?
替换图片的值需要解释一下:?
1.可以设为相对本页面的路径如../zbgl/abc.png?
2.如果是输出流,则需要把请求输出流的url映射成以图片格式结尾的。如/.../abc.do?id=123换成/../abc.png?id=123?
可以在web.xml里配一个servlet,如以*.png的请求转成.do的。如:

public class PngDispatcherServlet extends HttpServlet { 

private static final long serialVersionUID = 6230740581031996144L; 

public void init() throws ServletException { 

} 

public void doPost(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
doGet(request, response); 
} 

public void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 

//StringBuffer url = request.getRequestURL(); 
StringBuffer url = new StringBuffer(request.getRequestURI()); 
if(request.getQueryString() != null) { 
url.append('?'); 
url.append(request.getQueryString()); 
} 
String newUrl = url.toString().replaceAll(".png", ".do"); 
ServletContext sc = getServletContext(); 
RequestDispatcher rd = sc.getRequestDispatcher(newUrl); //定向的页面 
rd.forward(request, response); 
} 
} 

?export2word.js代码:?

/** 
* <p> Title: 用word书签替换的方式将内容导出到word</p> 
* <p> Description: **</p> 
* <p> Copyright: Copyright (c) 2007-2010 </p> 
* <p> Company: ** </p> 
* @author zhu 
* @version 1.0 
*/ 
var baseVoListObj = function(){ 
this.volist = new Array(); 
this.cols = new Array(); 
this.widths = new Array(); 
} 

var WordApp = function(wordTplPath){ 
var wordObj = new ActiveXObject("Word.Application"); 
if(wordObj==null){ 
alert( "不能创建Word对象!"); 
} 
wordObj.visible=false; 
this.wordObj = wordObj; 
this.docObj = this.wordObj.Documents.Open(getRootPath() + wordTplPath); 
} 

WordApp.prototype.closeApp = function(){ 
if (this.wordObj !=null){ 
this.wordObj.Quit(); 
} 
} 

WordApp.prototype.replaceBookmark = function(strName,content,type){ 
if (this.wordObj.ActiveDocument.BookMarks.Exists(strName)) { 
if (type != null && type == "pic") {//图片 
var objDoc = this.wordObj.ActiveDocument.BookMarks(strName).Range.Select(); 
var objSelection = this.wordObj.Selection; 
objSelection.TypeParagraph(); 
//alert(getRootPath()+content); 
var objShape = objSelection.InlineShapes.AddPicture(getRootPath()+content); 
} 
else { 
this.wordObj.ActiveDocument.BookMarks(strName).Range.Select(); 
this.wordObj.Application.selection.Text = content; 
} 
}else{ 
//alert("标签不存在"); 
} 
} 

WordApp.prototype.replaceBookmarkUsevo = function(voObj){ 
if(typeof voObj != "object"){ 
alert("请输入正确的vo对象"); 
}else{ 
for(var i in voObj){ 
this.replaceBookmark(i,voObj[i]); 
} 
} 
} 

WordApp.prototype.replaceBookmarkUsepicvo = function(voObj){ 
if(typeof voObj !="object"){ 
alert("请输入正确的vo对象"); 
}else{ 
for(var i in voObj){ 
this.replaceBookmark(i,voObj[i],"pic"); 
} 
} 
} 

WordApp.prototype.replaceBookmarkUsevolist = function(strName,voListObj){ 
if(typeof voListObj != "object"){ 
alert("参数应为数组类型"); 
}else{ 
var row = voListObj.volist.length; 
var col = voListObj.cols.length; 
var objDoc = this.wordObj.ActiveDocument.BookMarks(strName).Range; 
var objTable = this.docObj.Tables.Add(objDoc,row,col) ;//插入表格 
for (var i = 0; i < row; i++) { 
for(var j=0; j<col; j++){ 
//todo 列表里面如果有图片类型不支持,需要判断 
objTable.Cell(i+1,j+1).Range.InsertAfter(voListObj.volist[i][voListObj.cols[j]]); 
var width = voListObj.widths[j]; 
if(width.indexOf("px")!=-1){ 
objTable.Cell(i+1,j+1).Width = (width.substr(0,width.length-2)/100) * 28.35;//1厘米=28.35磅 
} 
} 
} 
//objTable.AutoFormat(16); 
objTable.Borders.InsideLineStyle = 1 
objTable.Borders.OutsideLineStyle = 0; 
} 
} 

WordApp.prototype.getSingleVo = function(formName,arrayObj){//第二个参数可以为空,不填时默认为表单里的所有元素 
var formObj = document.forms[formName]; 
if(formObj!=null){ 
if(arrayObj!=null){ 
if(arrayObj instanceof Array){ 
var vo = {}; 
for(var i=0;i<arrayObj.length;i++){ 
if(formObj.elements[arrayObj[i]]!= undefined ){ 
eval("vo." + arrayObj[i] + " = formObj.elements[arrayObj[i]].value;"); 
} 
} 
//alert(objToString(vo)); 
return vo; 
}else{ 
alert("弟二个参数应为数组类型"); 
} 
}else{ 
var vo = {}; 
for(var i=0;i<formObj.elements.length;i++){ 
eval("vo." + formObj.elements[i].name + " = formObj.elements[i].value;"); 
} 
return vo; 
} 
}else{ 
alert("第一个参数表示的表单不存在"); 
return null; 
} 
} 

WordApp.prototype.getVoList = function (formName,arrayObj){//表单名,属性数组(可以为空) 
//var formArray = document.forms[formName]; 
var formArray = document.getElementsByName(formName); 
if (formArray != null) { 
if (arrayObj instanceof Array) { 
var voListObj = new baseVoListObj(); 
for(var i=0;i<formArray.length;i++){ 
var vo = {}; 
for(var j=0;j<arrayObj.length;j++){ 
if(formArray[i].elements[arrayObj[j]]!= undefined ){ 
eval("vo."+arrayObj[j]+" = formArray[i].elements[arrayObj[j]].value;"); 
if(i==0){//第一次的时候定义有效属性和宽度 
voListObj.cols.push(arrayObj[j]); 
voListObj.widths.push(formArray[i].elements[arrayObj[j]].style.width); 
} 
} 
} 
voListObj.volist.push(vo); 
} 
return voListObj; 
}else{ 
var voListObj = new baseVoListObj(); 
for(var i=0;i<formArray.length;i++){ 
var vo = {}; 
for(var j=0;j<formArray[i].elements.length;j++){ 
eval("vo."+formArray[i].elements[j].name+" = formArray[i].elements[j].value;"); 
if(i==0){//第一次的时候定义宽度 
voListObj.cols.push(formArray[i].elements[j].name); 
voListObj.widths.push(formArray[i].elements[j].style.width); 
} 
} 
voListObj.volist.push(vo); 
} 
return voListObj; 
} 
}else{ 
return null; 
} 
} 

function objToString(obj){ 
if(obj instanceof Array){ 
var str=""; 
for(var i=0;i<obj.length;i++){ 
str+="["; 
for(var j in obj[i]){ 
str+=j+"="+obj[i][j]+" "; 
} 
str+="]\n"; 
} 
return str; 
}else if(obj instanceof Object){ 
var str=""; 
for(var i in obj){ 
str+=i+"="+obj[i]+" "; 
} 
return str; 
} 
} 

function getRootPath() 
{ 
var location=document.location; 
if ("file:" == location.protocol) { 
var str = location.toString(); 
return str.replace(str.split("/").reverse()[0], ""); 
} 
var pathName=location.pathname.split("/"); 
return location.protocol+"//"+location.host+"/"+pathName[1]+"/"; 
} 
?
  相关解决方案