js调用浏览器的打印功能

JavaScript027

js调用浏览器的打印功能,第1张

最近做了个运用浏览器打印合同的功能,之前没做过,记录一下其中遇到的问题,打印页面建议使用新开窗口 原型图如下: 页面内容不多说,表格直接用table绘制,在页面顶部加一个悬浮的打印按钮。点击打印按钮调用打印机(ctrl+p) 实现的打印预览效果如下图: 谷歌浏览器可在打印预览-更多设置-选项中去除页眉和页脚的勾选 打印的页面不可出现横向滚动条,否则会出现打印出来的内容显示不全的问题。

最近做一个后台管理系统,其中有个用户需求要求调用 浏览器打印 的功能去打印订单,本来以为需要用户手动( Ctrl+P )、或者打开 右键菜单 ,再选择打印功能。后来经过查询文档,JS提供了调用浏览器打印功能的API。

页面(全屏弹窗)内容设计如上图所示:

其中页面右下方有两个按钮:

这样可以调用浏览器打印功能,但是打印预览页面上会出现右下方的两个按钮,这肯定是用户不想看到的。

因此还需要根据 CSS媒体查询 来区分:

欢迎访问: 个人博客地址

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":""} ] ] } ] ]