dot.js的运用(初来乍到前端版)

JavaScript015

dot.js的运用(初来乍到前端版),第1张

参考文章: dot.js用法详细参考

dot.js在我眼中是个模板引擎,因为项目中经常会用到排版,例如下面两张图片,有模板嵌套的话,就很方便。

首先看一下我的JSON接口传来的

数据

,我格式化了一下,我截取了2条

在前端获取JSON数据里,我用的是ajax异步获取(我用的是apicloud,所以用他的获取方法,道理都是一样的)

因为是异步处理,我们把需要处理的内容放在回调函数function里(因为我们要先获取到了数据,才能进行其他操作啊!曾经的犯错,回顾。)。现在console.log(JSON.stringify(ret.data)),打印出的应该是data的内容,截取了2条。如果console.log(ret.data),打印出的应该是对象,所以转换成字符串。(关于JSON对象,字符串等问题,上一篇)

现在看一下第一大点的dot.js的用法的第三点

按照这个格式,我写了下面这个模板和调用方法:

我运用了weui的页面框架,样式简单,不讲了,大概是:

<div class=weui.grids>

    <div class=weui-grid></div>  //我用dot.js方法,把这个设成了模板,循环了一下把数据放进去。

</div>

JS-打印word的模板程序

我们在做项目中经常遇到“打印表格”的功能,在此介绍一下我所用过的打印方法。

一、比较简单的做法,word另存转化为html文件的方式。分析如下:

1、首先我们需要在office中用wrod画好文件的模板,然后将其另存为thm网页形式。

2、将其改为jsp页面,这样我们就可以文件中使用后来传过来的变量值。此时就是我们传统的jsp方式,后台定义参数,然后前台获取,将变量值写在我们需要显示的地方。

3、对于表格,我们可以用循环来控制。

4、这样做打比较简单,缺点word模板不能修改,一旦表格做个微小的变化,那我们的工作量也不小,因为word转化后的代码很难读懂,要在代码上控制其样式,是相当的困难,所以不推荐这种做法。

(注:1、 在做模板时,我们可以先在需要显示变量值的地方首先定义好值,然后在jsp中直接替换就行。

2、在jsp页面中,在首先加入“<%@ page contentType="application/mswordcharset=UTF-8"%>”, 以标识此页面为word文件。

3、如果需要点击时直接打开word文件,而非弹出“保存、打开”对话框,则需要删除“xmlns:w="urn:schemas-microsoft-com:office:office"”代码即可。

下面我们介绍另一种更常用的方法,此方法的有点是:修改word模板文件,不会影响程序。

二、用JS控制的打印方式,具体如下:

1、首先画word模板,在需要动态显示内容的地方插入“标签”。方法如下:在word中,选中需要被替换的内容-->插入-->书签,为其定义好名字即可,其它类似。

2、将做好的模板文件另存为模板dot文件。

做到这基本就差不多了,接下来就是后台代码发挥的时候了。

3、在后台封装参数值。

4、调用JS函数打印。

为了更为直观的介绍,下面用一完整的例子介绍。

先把代码贴出来:

1、JS模板文件,适用范围:

a. 根据文档文件,所有要显示的内容都定义为书签。

b. 纯表格文件。如果为多个表格或表格中嵌套表格,则需要稍加修改。

c. 文档、表格混搭型。

代码如下:

/** * 得到 文件模板的目录 * @param {} fileName * @return {} */ function getFileTemplatePath(fileName){ var path = "/page/printTemplate/" + fileName + ".dot"var url="http://"+window.location.hostname + ":" + window.location.port+ this.getContextPath() + pathreturn url} /** * 调出word模板,并为标签赋值 * @param {} jsonObj json对象 * @param {} fileName 所要打开的word文件名 */ function printWord(jsonObj,fileName){ var word=new ActiveXObject("Word.Application")word.Visible=truevar url= this.getFileTemplatePath(fileName)word.Documents.add(url) for(i=0i<jsonObj.lengthi++){ if ((jsonObj[i].text)!="list"){ range=word.ActiveDocument.Bookmarks(jsonObj[i].text).Rangerange.text=jsonObj[i].value}else{ var myTable=word.ActiveDocument.Tables(1)var rowsCount = myTable.Rows.Countvar iRow=2for(j=0j<jsonObj[i].value.lengthj++){ if (iRow >rowsCount){ myTable.Rows.Add()} var length = jsonObj[i].value[j].lengthfor(var k=0k<lengthk++){ myTable.Rows(iRow).Cells(k + 1).Range.Text=jsonObj[i].value[j][k].value} iRow ++} } } word.Visible=true}

2、看到代码就会明白,这段代码需要一个JSON类型的参数。

下一步我们所做的工作就是要在JSON上做文章了。 附后台代码(封装JSON,java)

类:PrintJSONObjectSet

import org.json.JSONArrayimport org.json.JSONObjectpublic class PrintJSONObjectSet { private JSONArray japublic PrintJSONObjectSet(){ ja = new JSONArray()} public JSONArray getJSONArray(){ return ja} public JSONObject json(Object key, Object value) throws Exception{ JSONObject jo = new JSONObject()value = "".equals(value) || value == null "" : valuejo.put("text", key)jo.put("value", value)return jo} public void put(Object key, Object value) throws Exception{ ja.put(json(key,value))} public void put(Object obj){ ja.put(obj)} }

打印封装的方法:

/** * 打印出国(境)证明 * @return * @throws Exception */ public String printChuGuoJingZhengMing() throws Exception{ JSONArray ja = new JSONArray()GroupInfo group = this.getGroupInfo()String[] countrys = this.getCountrys()if(countrys != null){ for(int c=0c<countrys.lengthc++){ PrintJSONObjectSet js = new PrintJSONObjectSet()SeedGroupRef seed = seedImpl.getCzcz(getGroupInfoId(),countrys[c])js.put("year", seed.getFileYear())js.put("fileNum", seed.getFileNum())js.put("leader",group.getLeader())js.put("groupCount", group.getGroupCount())js.put("country",countrys[c])js.put("dispCode",getDispCode())js.put("printYear", DateFunc.getPrintYear())js.put("printMonth", DateFunc.getPrintMonth())js.put("printDay", DateFunc.getPrintDay())PrintJSONObjectSet js2 = new PrintJSONObjectSet()List<MemberInfo>memberList = this.getIsSefMembers()MemberInfo memberfor(int i=0i<memberList.size()i++){ PrintJSONObjectSet js3 = new PrintJSONObjectSet()member = memberList.get(i)js3.put("name1",member.getName())js3.put("passportNum1",member.getPassportNum())if(++i <memberList.size()){ member = memberList.get(i)js3.put("name2",member.getName())js3.put("passportNum2",member.getPassportNum())} js2.put(js3.getJSONArray())} js.put("list", js2.getJSONArray())ja.put(js.getJSONArray())} } PrintWriter outSystem.out.println(ja.toString())try{ out = response.getWriter()out.print(ja.toString())out.close()}catch(Exception e){ e.printStackTrace()} return null}

对于JSON的说明:

1、最外层为一个JSONArray,这个JSON中包含多个JSONArra,其控制文档的数量。

2、在第二层JSONArray中,包含多个JSONObject。其中每个JSONObject包含一个JSONObject对象。

每个JSONObject对象以{"text":"name","value":"张三"}的形式存储。

3、遇到表格时,则在第二个JSONArray中,封装类型{"text":"list","value":[[{"text":"","value:""}]]}形式。

也就是说此时的JSONObject的值必须为list,只有这样,JS中才能将其作为表格来输入。

其中在名为 list 的JSONObject对象中,包含多个JSONArray,用来控制行数。

每个JSONArray中包含多个类型第2条中形式的JSONObject对象,用来控制列数。

调用方法:(采用aJax)

Ext.Ajax.request({ url : href, success : function(response, options) { var responseText = response.responseTextvar jsonObj=eval('(' + responseText + ')')for(var i=0i<jsonObj.lengthi++){ printWord(jsonObj[i],'chuGuoJingZhengMing')} }, failure : function(response, options) { alert("fail!")} })

例子中的word文件:

如果国家为多个时,则会打印出多个文件。

对于代码的说明:

在后台代码封装中,我们将 书签名 和 值 封装为一个JSON对象,这样JS处理中,我们就方便了,不用再逐个写出每个书签的`名字,供其查找、然后赋值。

在后台代码中,我这里在打印时需要根据国家来确定所要打印的文档数量,如果为多个国家则要打印出多个文档,所以在后台封装,最外层又加了一个JSONArray,JS中也多了一道循环,这个可以根据需要自己调整。

特殊情况下,需要我们单独处理,如多个表格的情况下,或者表格嵌套表格。

这里说一下表格嵌套的情况下,如果获得被嵌套的表格对象。

如:var myTable=word.ActiveDocument.Tables(1).Rows(1).Cells(1).Tables(1)

这里得到的是文档中第一个表格的第一行的每一列中的每一个表格对象,其它类似。

range=word.ActiveDocument.Bookmarks("name").Range 的意思是 得到文档中 书签名为“name”的对象。

range.text=“张三” 为其赋值为 张三。

这里采用的是dot文件,因为dot文件存在于服务器上,如果使用doc文件作为模板文件的话,在多人访问时,会出现线程锁死的情况,故采用dot文件。

附加一段生成好的JSON串:

[ [ {"text":"year","value":2011}, {"text":"fileNum","value":5}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"俄罗斯"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[[ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ], [ {"text":"year","value":2011}, {"text":"fileNum","value":7}, {"text":"leader","value":"彭瓒"}, {"text":"groupCount","value":5}, {"text":"country","value":"韩国"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[ [ {"text":"name1","value":"彭瓒"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"张三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓒"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"张三五"}, {"text":"passportNum2","value":""} ] ] } ] ]