WEB页面打印－－打印指定区域，页面预览，页面设置

最新推荐文章于 2026-04-29 11:23:05 发布

原创最新推荐文章于 2026-04-29 11:23:05 发布 · 9.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web #javascript #webbrowser #button #function

本文介绍了在Web开发中实现打印指定区域的两种常见方法：生成Word或Excel文档，以及利用JavaScript和WebBrowser组件。对于JavaScript方案，详细展示了如何创建新页面、隐藏不需要打印的内容以及提供打印预览、直接打印和页面设置功能的按钮。

在很多项目中间都需要对web页面进行打印输出，有的是打印表格内容，有的是打印局部文字，这时候可以选择的方案大体有两种。

1.利用组件把报表的内容生成WORD文档或者是Excel文档，导出以后利用Office自带的打印功能进行打印

2.在网页上利用javascript或者是其他基于javascript和其他语言的组建

下面详细介绍这两种方法

1.生成word或者是Excel文档，当要打印的区域内容为文本的时候适合导出为Word文档来处理，当要打印的内容为表格的时候适合导出为Excel文档，在JSP中可以利用Jxl，jacob，POI等组建进行office文档的处理，个人推荐使用POI，这个组件是由apache基金开发维护的，其在开源领域的地位无可置疑。这个组件的使用方法不再详细介绍，再它的帮助文档上面有详细的使用方法和示例代码。可以满足各种基本的开发需要。

2.采用javascript或者打印组件的方法就更多了，下面简单介绍几种方案并给出其中一个方案的详细代码

a.用纯javascript代码：

这种方法就是简单的调用window.open()方法，这中方法的功效等同于用IE的打印功能，将对整个页面所见的内容进行全部的打印，而且会自动打印出页眉页脚。

b.修改注册项，和其它针对某一种浏览器的解决方案

这种方法的原理基本上都是进入客户端系统的注册表，把里面的某些IE选项进行修改，例如屏蔽或者是修改页眉页脚等自定义的打印方方案，这种反感的弊端是非常明显的，首先要在网页上修改注册表项需要再客户端降低浏览器的安全性设置，这将给客户的计算机带来很大的风险，而且这些方法都是在注册表中找到浏览器的位置然后进行操作，这就将处理局限为某一种或者是几种浏览器，而且也将客户端的操作系统局限为Windows

c.第三方的插件

采用第三方的插件，例如ScriptX，WebPrint等，这也第三方的原理基本上同 b 方案相同，也有的是采用纯javascript代码进行封装，但是采用这种插件就需要客户端在打印的时候安装插件，同样需要降低客户端的安全设置，如果有防火墙或者是杀毒软件的影响将不能起到作用，而且这种方案的运行速度很成问题，加载插件的处理严重影响运行速度，不过这种方案的打印效果倒是非常理想的

d.折衷方案

采用WebBrowser和javascript和CSS结合起来

打印指定区域
在页面上显示打印打印预览页面设置按钮，用来对打印进行设置，这样可以去掉页眉页脚
在javascript中采用CSS控制隐藏不想打印的内容

下面是详细的代码（注：由于利用javascript里面构造新页面，所以构造代码连在一起，否则javascript解释错误）：

     <html>
    <head>
   <script language="javascript">
     function printme()
   {
         var print = this.document.getElementById("print").innerHTML;
        print = print +"<br/>"
     print = print +'<SCRIPT language=javascript> function printView(){hidden();document.all.WebBrowser.ExecWB(7,1); } function print(){hidden();document.all.WebBrowser.ExecWB(6,6)}function pageSetup(){hidden();document.all.WebBrowser.ExecWB(8,1);}function hidden(){document.all("printView").style.display="none"; document.all("print").style.display="none"; document.all("pageSetup").style.display="none";}<//script>';
        print = print + "<OBJECT   classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2   height=21   id=WebBrowser   width=87></OBJECT> <input id=printView name=Button   onClick=printView()   type=button   value=打印预览> <input id = print name=Button   onClick=print()   type=button   value=直接打印>   <input id = pageSetup name=Button   onClick= pageSetup() type=button   value=页面设置>";
        var newWindow = window.open();
        newWindow.document.open("text/html");
        newWindow.document.write(print);
        newWindow.document.close();
   }
</script>

</head>
<body>
<span id='print'>把要打印的内容放这里</span>
<p>所有内容</p>
<a href="javascript:printme()" target="_self">打印</a>

</body>
</html>

代码解释：把要打印的内容放在 id为print 的区域内在 printme函数中把要输出的内容放入一个新的也页面，在新页面里面进行打印的处理，在新页面里面用WebBrowser对象进行打印的处理，用css控制隐藏不想打印的内容。