javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印_javascript技巧

由于时间比较紧，没多的时候去学习研究上述工具包，现在用javascript操作ActiveXObject控件，用替换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（对象的列表集合）为一组 组织好页面上 再得到这些数据后进行替换。
数据组织形式如下：
<p 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>
</p>

使用：
<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]+"/";
}
先说到这里吧，以后有更好的再更新，希望对大家有用。