js或jquery实现页面打印
2017-12-24 13:41
681 查看
最近一直在做页面打印相关的页面。这里分享下用css、js或jQuery实现页面打印的几种方法。
1. 使用js打印当前窗口的内容:
<input type='button' value='打印整页' onclick='javascript:window.print();' />
2. 使用js打印当前窗口的内容:
<html> <head> <script type="text/javascript"> function printpage() { window.print() } </script> </head> <body> <input type="button" value="Print this page" onclick="printpage()" /> </body> </html>
注:方法2和方法1原理上是一样的
3. 使用css控制局部打印:适用于只有小部分区域的内容不显示:
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <style media=print type=”text/css”> .noprint{visibility:hidden} </style> 要打印的内容。哈哈! <p class="noprint">将不打印的代码放在这里。</p> <a href="javascript:window.print()" target="_self">打印</a> </body> </html>
注:通过css设置打印样式,需要针对打印机做专门的设置:
@media print {
}
或者引用外部样式表:
<link rel="stylesheet" media="all" href="style.css")">
只对打印有效的样式:
<link rel="stylesheet" media="print" href="print.css")">
不过如果是新建空白页的话,有可能外部链接的打印样式表不会生效,因此只能将其改为
<style>写入当前页内。
4. 使用js实现局部打印:方法一
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>haorooms js局部打印案例</title> <script type="text/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> </head> <body> <p>1不需要打印的地方</p> <p>2这里不要打印啊</p> <!--startprint--><!--注意要加上html里star和end的这两个标记,之前没加,一直没效果,谁叫咱们菜呢~--> <h1>打印标题</h1> <p>打印内容~~</p> <! 4000 --endprint--> <button type="button" onclick="doPrint()">打印</button> <p>1haorooms博客不打印的地方啊哈哈哈哈</p> <p>2</p> </body> </html> </html>
5. 使用js实现局部打印:方法二
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //自动在打印之前执行 window.onbeforeprint = function(){ $("#test").hide(); }; //自动在打印之后执行 window.onafterprint = function(){ $("#test").show(); } </script> <body > <div id="test">这段文字不会被打印出来</div> <input type="button" onclick="window.print();" value="打印本页" /> <div> 打印区域内容 </div> <script src="js/jquery.js"></script> </body> </html>
6. 使用js实现局部打印:方法三
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <script> function myPrint(obj){ var newWindow=window.open("打印窗口","_blank");//打印窗口要换成页面的url var docStr = obj.innerHTML; newWindow.document.write(docStr); newWindow.document.close(); newWindow.print(); newWindow.close(); } </script> <div id="print"> <hr /> 打印演示区域,点击打印后会在新窗口加载这里的内容! <hr /> </div> <button onclick="myPrint(document.getElementById('print'))">打 印</button> </body> </html>
7. 通过WebBrowser组件打印:调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <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> <p class="noprint"> <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="wb" name="wb" width="0"></OBJECT> <input type="button" name="button_print" value="打印" onclick="javascript:printit()" /> <input type="button" name="button_setup" value="打印页面设置" onclick="javascript:printsetup();" /> <input type="button" name="button_show" value="打印预览" onclick="javascript:printpreview();" /> </p> </body>
注:WebBrowser是IE内置的浏览器控件,无需用户下载.
WebBrowser控件:
<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>
关于这个组件的用法,列举如下:
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销,有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
8. 使用jQuery插件:jqprint()打印
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery打印插件jqprint</title> <script language="javascript" src="jquery-1.4.4.min.js"></script> <!-- 如果您使用的是高版本jQuery调用下面jQuery迁移辅助插件即可 <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script> --> <script language="javascript" src="jquery.jqprint-0.3.js"></script> <script language="javascript"> function aa(){ $("#ddd").jqprint(); } </script> </head> <body> <div id="ddd"> <table> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</ c9de td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table> </div> <input type="button" onclick="aa()" value="打印"/> </body> </html>
设置模板打印:
$("#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 });
9. 使用jQuery插件:query.PrintArea.js实现局部打印
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> </head> <body> <div style="text-align:center; margin-top: 30px"> <div id="printArea"> <div>......文本打印区域......</div> <div>......文本打印区域......</div> <div>......文本打印区域......</div> <div>......文本打印区域......</div> <div>......文本打印区域......</div> </div> <br> <br> <input id="btnPrint" type="button" value="打印文本区域" /> <input id="btnPrintFull" type="button" value="全屏打印" /> </div> </body> <script src="js/jquery.js"></script> <script src="js/jquery.PrintArea.js"></script> <script> $("#btnPrint").click(function(){ $("#printArea").printArea(); }); </script> </html>
关于打印,还有以下几个需要注意的:
强制分页的代码:<div style="page-break-after: always;"></div>
大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。 为了达到最佳效果,使颜色清晰明了,我们至少需要包含一下基本的打印样式:
@media print { body { color: #000; background: #fff; } }
为了保证不被跨页打印,如一个标题和内容在页面底部被分开:
h2, h3 { page-break-after: avoid;}
另一种情况是要防止图片过宽而超出纸张边缘:
img {max-width: 100% !important;}
第三个要点是确保 articles 文章标签的内容,在新的一页开始:
article {page-break-before: always;}
还要注意列表和图片不被分开在不同的页:
ul,img {page-break-inside: avoid;}
相关文章推荐
- js或jquery实现页面打印可局部打印
- jquery/js 实现 标签 条码 一维码 Web页面 区域打印解决方案 实例
- js或jquery实现页面打印(局部打印)
- jquery/js 实现 标签 条码 一维码 Web页面 区域打印解决方案 实例
- js或jquery实现页面打印可局部打印
- js或jquery实现页面打印可局部打印
- JS/Jquery_实现打印页面指定div的方法_个人总结
- jquery.PrintArea.js 实现打印局部页面
- js或jquery实现页面打印可局部打印
- js或jquery实现页面打印可局部打印
- js或jquery实现页面打印(局部打印)
- 实现页面打印(JS 、JQuery)
- js或jquery实现页面打印可局部打印
- jQuery打印插件(jQuery.print.js)在单页面中,打印的是首页的信息而不是iframe的内容
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
- 利用css和js实现firefox和IE都支持的页面局部打印
- JS 实现简单的页面局部打印例子
- Laravel一个页面里有多个分页并用jQuery pagination.js实现
- JS调用iframe方式实现Web区域打印页面内容