js实现网页打印功能

『壹』 js调用浏览器的打印功能

最近做了个运用浏览器打印合同的功能，之前没做过，记录一下其中遇到的问题，打印页面建议使用新开窗口

原型图如下：

页面内容不多说，表格直接用table绘制，在页面顶部加一个悬浮的打印按钮。点击打印按钮调用打印机(ctrl+p)

实现的打印预览效果如下图：

谷歌浏览器可在打印预览-更多设置-选项中去除页眉和页脚的勾选

打印的页面不可出现横向滚动条，否则会出现打印出来的内容显示不全的问题。

『贰』 JS-打印word的程序

JS-打印word的模板程序

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

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

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

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

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

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

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

2、在jsp页面中，在首先加入“<%@ page contentType="application/msword;charset=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() + path; return url; } /** * 调出word模板，并为标签赋值 * @param {} jsonObj json对象 * @param {} fileName 所要打开的word文件名 */ function printWord(jsonObj,fileName){ var word=new ActiveXObject("Word.Application"); word.Visible=true; var url= this.getFileTemplatePath(fileName); word.Documents.add(url) for(i=0;i<jsonObj.length;i++){ if ((jsonObj[i].text)!="list"){ range=word.ActiveDocument.Bookmarks(jsonObj[i].text).Range; range.text=jsonObj[i].value; }else{ var myTable=word.ActiveDocument.Tables(1); var rowsCount = myTable.Rows.Count; var iRow=2; for(j=0;j<jsonObj[i].value.length;j++){ if (iRow > rowsCount){ myTable.Rows.Add(); } var length = jsonObj[i].value[j].length; for(var k=0; k<length; k++){ 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.JSONArray; import org.json.JSONObject; public class PrintJSONObjectSet { private JSONArray ja; public 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 "" : value; jo.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=0; c<countrys.length; c++){ 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 member; for(int i=0; i<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 out; System.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.responseText; var jsonObj=eval('(' + responseText + ')'); for(var i=0; i<jsonObj.length; i++){ 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":""} ] ] } ] ]

;

『叁』 js 怎么实现打印页面的一部分内容

<table width="100%" align="center" style="border-collapse: collapse">
<tbody>
<tr class="no_print" height="20" bgcolor="#f7f7f7" align="center">
<td height="25" colspan="3">
<input type="button" name="print" value="打印" onclick="preview('PrintContentDiv')" />
</td>
</tr>
</tbody>
</table>
<div id="PrintContentDiv">
<!--这里写内版容权-->
</div>

『肆』 js控制横向打印web网页内容

用这个Lodop插件 兼容IEChromeFirefox ····

支持横向打印，票据打印，修改页眉页脚等等，定制性很强大··

关键是免费的·做Web打印神器,

LODOP.SET_PRINT_PAGESIZE(1,4500,1600,"证书打印");//第一个参数设置为1是横向，2是纵向

『伍』 JS调用浏览器的打印功能

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

页面（全屏弹窗）内容设计如上图所示：

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

这样可以调用浏览器打印功能，但是打印预览页面上会出现右下方的两个按钮，这肯定是用户不想看到的。
因此还需要根据 CSS媒体查询 来区分：

欢迎访问： 个人博客地址

『陆』 请教一个在网页中js控制默认横向打印的问题

打印
一、普通打印（整页打）
这个不用多说，直接按CTRL+P或引用window.print();

二、打印网页内部分内容（自定义）

分三种方法实现
1、用css控制

引用:
@media print
.a {display:block}
.b {display:hidden}

把你不想打印的部分class设为b
首先在网页中添加：

引用:
<OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-
11D0-A96B-00C04FD705A2"VIEWASTEXT > </OBJECT >

然后就可以依次加入功能按钮了：

引用:
<input type="button" value="打印" > <input type="button" value="直接打印" >
<input type="button" value="页面设置" >
<input type="button" value="打印预览" > <INPUT type="button" value="关闭窗口" >

将这两块东西放到 <center class=noprint > </center >就不会打印这些按钮了。当然要定义noprint了：
<style media="print" >.Noprint { DISPLAY: none } </style >只要把不想打印的东西的css设置成noprint就可以了。
现在就实现了基本的web打印，需要注意的情况如下：
a. 必须将ie的internet选项的安全设置中对于没有标记为安全的ActiveX控件进行...设置成提示或者启用，否则会报错，导致不可用。
b. 如果在vs.net编辑环境下编辑该页面，它经常自动的给object添加多余的参数，有了这些东西，打印就会出错，所以要记得最后保存的时候删除它们。

2、用javascript打印固定标签内的内容
a、在页面的代码头部处加入JavaScript：

引用:
<script language=javascript >
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr=" <!--startprint-- >";
eprnstr=" <!--endprint-- >";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script >

b、在页面正文处加上 <!--startprint-- >与 <!--endprint-- >标识。
也就是在需要用户打印保存的正文所对应的html处附加上。同时，如果采用小偷程序获得远程数据并需打印，可将此等数据置于该定义标签之内即可。
c、截取内容部分已完成，现在加个“打印”的链接：
<a href="javascript:;" >打印 </a >

3、windows自带功能
按住鼠标的左键，将你想要打印的内容选定，然后单击右键选择“打印”，在弹出的打印对话框中的“页面范围”中选择“选定范围”就可以只打印你选择的内容了。

（三）打印去掉/添加页眉页脚

引用:

<script language="JavaScript" >
var hkey_root,hkey_path,hkey_key
hkey_root="HKEY_CURRENT_USER"
hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"
//设置网页打印的页眉页脚为空
function pagesetup_null(){
try{
var RegWsh = new ActiveXObject("WScript.Shell")
hkey_key="header"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
}catch(e){}
}
//设置网页打印的页眉页脚为默认值
function pagesetup_default(){
try{
var RegWsh = new ActiveXObject("WScript.Shell")
hkey_key="header"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")
}catch(e){}
}
</script >
<input type="button" value="清空页码" onclick=pagesetup_null() >
<input type="button" value="恢复页码" onclick=pagesetup_default() >

复制出去，看下效果就可以了

『柒』 如何利用JS控制打印某页面内某些内容

楼主看这里，把分给我啊。
引用的网络专地址属：
地址：http://hi..com/vhook/item/63c63e179f347821f6625cd9

『捌』 js如何实现页面打印

<HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312" />
<SCRIPT language=javascript>
function printsetup(){
// 打印页面设置
wb.execwb(8,1);
}
function printpreview(){
// 打印页面预览
wb.execwb(7,1);
}
function printit()
{
if (confirm('确定打印吗？')) {
wb.execwb(6,6)
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align=center>
<OBJECT id=wb height=0 width=0
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
<INPUT onclick=javascript:printit() type=button value=打印 name=button_print />
<INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />
<INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />
</DIV>
</BODY>
</HTML>

『玖』 使用Javascript怎样自动打印页面

1、js实现（可实现局部打印）
[html] view plain
<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />
<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
<style type="text/css" media=print>
.noprint{display : none }
</style>
<p class="noprint">不需要打印的地方</p>
<script>
function preview(oper)
{
if (oper < 10)
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}
</script>
<p>XXXXX</p>
<!--startprint1-->要打印的内容<!--endprint1-->
再加个打印按纽 onclick=preview(1)
2、调用windows底层打印，报安全警告，不建议使用（不支持局部打印）
[html] view plain
<HTML>
<HEAD>
<TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312" />
<SCRIPT language=javascript>
function printsetup(){
// 打印页面设置
wb.execwb(8,1);
}
function printpreview(){
// 打印页面预览
wb.execwb(7,1);
}
function printit()
{
if (confirm('确定打印吗？')) {
wb.execwb(6,6);
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align=center>
<OBJECT id=wb height=0 width=0
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
<INPUT onclick=javascript:printit() type=button value=打印 name=button_print />
<INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />
<INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />
一按开始的减肥了卡时间段
</DIV>
</BODY>
</HTML>
3、jQuery实现（支持局部打印）
[html] view plain
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(document).ready(function(){
$("input#biuuu_button").click(function(){
$("div#myPrintArea").printArea();
});
});
</script>
<input id="biuuu_button" type="button" value="打印"></input>
<div id="myPrintArea">.....文本打印部分.....</div>

『拾』 javascript JS 实现打印页面功能 支持多浏览器,兼容IE,火狐,谷歌

您好！很高兴为您答疑。
在B/S结构下，web页面打印是一个非常专难以解决的问题，目前如果希属望通过js实现兼容性的打印，基本是不可能的。采用对css依赖度较低的表格布局，然后作为隐藏层，在打印时通过js调用是目前最有效的手段，而scriptx之类，是无法跨浏览器平台使用的。
如果对我们的回答存在任何疑问，欢迎继续问询。