我们在网页开发过程中经常会有打印页面的需求, 通过 JS 来实现的方法有很多, 下面我们看一下 JavaScript 中通过 Windows.print()方法与 jqprint()插件打印页面的方法.
方式一: Windows.print()
整体打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
现在就轻松实现了页面的打印, 但是这种方式会将整个页面打印, 如果想要实现指定区域的打印需要通过下面的设置
局部打印
首先, 在 html 中, 通过 star 和 end 来标记打印区域
- <h1>
- 这块内容不需要打印
- </h1>
- <!--startprint-->
- <div class="content">
这里是需要打印的内容
- .....
- </div>
- <!--endprint-->
- <h1 > 这块内容不需要打印</h1>
然后, 在点击事件中添加如下代码
- function doPrint() {
- bdhtml=Windows.document.body.innerHTML;
- sprnstr="<!--startprint-->";
- eprnstr="<!--endprint-->";
- prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
- prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
- Windows.document.body.innerHTML=prnhtml;
- Windows.print();
- }
过滤打印区域的内容
例如
- <!--startprint-->
- <div class="content">
- <button class="noprint">预览</button>
- <button class="noprint">打印</button>
这里是需要打印的内容
- .....
- </div>
- <!--endprint-->
上面的预览和打印按钮不希望打印, 如果要过滤的话可以做下面的样式设置
- <style type="text/CSS">
- @media print {
- .noprint{
- display: none;
- }
- }
- </style>
或:
- <style type="text/css" media="print">
- .noprint{
- display: none;
- }
- </style>
分页打印
使用 Windows.print() 打印时, 如果内容超出会自动分页. 但是我们如果需要自定义分页范围, 如碰到表格分页打印, 可以通过进行如下设置:
- <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always">
- </table>
方式二, jqprint()
jqprint 是一个基于 jQuery 编写的页面打印的一个小插件, 但是不得不承认这个插件确实很厉害, 最近的项目中帮了我的大忙, 在 web 打印的方面, 前端的打印基本是靠 Windows.print()的方式进行打印的, 而这个插件在其基础上进行了进一步的封装, 可以轻松实现打印网页上的某个区域, 这是个亮点.
引入
- <script language="javascript" src="jquery-1.4.4.min.js"></script>
- <script language="javascript" src="jquery.jqprint-0.3.js"></script>
- JS
- <script language="javascript">
- function a(){
- $("#ddd").jqprint();
- }
- </script>
- HTML
- <div id="ddd">
- <table>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- </table>
- </div>
- <input type="button" onclick="a()" value="打印"/>
设置模板打印
- $("#printContainer").jqprint({
- debug: false,
- // 如果是 true 则可以显示 iframe 查看效果(iframe 默认高和宽都很小, 可以再源码中调大), 默认是 false
- importCSS: true,
- //true 表示引进原来的页面的 CSS, 默认是 true. 如果是 true, 先会找 $("link[media=print]," 若没有会去找 $("link")中的 CSS 文件)
- printContainer: true,
- // 表示如果原来选择的对象必须被纳入打印(注意: 设置为 false 可能会打破你的 CSS 规则).
- operaSupport: true
- // 表示如果插件也必须支持歌 opera 浏览器, 在这种情况下, 它提供了建立一个临时的打印选项卡. 默认是 true
- });
另外还可以使用 HTML 标签 < object > 引入 Webbrowser 控件 (只兼容 IE) 或者调用 Windows 底层打印, 报安全警告, 不建议使用(不支持局部打印)
来源: http://www.css88.com/qa/javascript/11120.html