javascript中的打印（原生js以及jQuery）
来源：互联网 发布：查看svn端口号命令 编辑：程序博客网 时间：2024/05/18 01:09
方法1：原生方法打印
window.print();//直接打印当前界面，效果不行，用过的都说差......方法2：利用jQuery插件 ”PrintArea“ 进行打印
好处，容易控制区域及格式进行局部打印等
首先在jquery库后引入 jquery.PrintArea.js
//最简单的使用方法 $("#formModal").printArea();//打印区域（<div id="formModal">。。。。。。。。</div>）另外，官网的例子，可以设置打印参数，大家根据需要求自由选择
<!DOCTYPE html><html> <head> <script src="jquery-1.10.2.js" type="text/JavaScript" language="javascript"></script> <script src="jquery-ui-1.10.4.custom.js"></script> <script src="jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script> <link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" /> <link type="text/css" rel="stylesheet" href="PrintArea.css" /> <!-- Y : rel is stylesheet and media is in [all,print,empty,undefined] --> <link type="text/css" rel="stylesheet" href="media_all.css" media="all" /> <!-- Y : rel is stylesheet and media is in [all,print,empty,undefined] --> <link type="text/css" rel="" href="empty.css" /> <!-- N : rel is not stylesheet --> <link type="text/css" rel="noPrint" href="noPrint.css" /> <!-- N : rel is not stylesheet --> <link type="text/css" rel="stylesheet" href="media_none.css" media="xyz" /> <!-- N : media not in [all,print,empty,undefined] --> <link type="text/css" href="no_rel.css" media="print" /> <!-- N : no rel attribute --> <link type="text/css" href="no_rel_no_media.css" /> <!-- N : no rel, no media attributes --> </head><body> <div style="border: solid 2px #999fff; float: left; padding: 5px; margin-bottom: 5px;"> <div style="text-align: center;"> <span style="font-weight: bold;">Contains content that I want to print</span> <br> This is just a sample page to demonstrate this plugin. </div> <div class="PrintArea area1 all" id="Retain"> <div>Print Area 1</div> <span style="color: #000777;">print me</span> <span class="test">xyz</span> <br> <input name="chkTest1" value="1" type="checkbox"> <input name="chkTest2" value="2" type="checkbox"> <br> <input value="3" name="rdoTest3" type="radio"> <input value="4" name="rdoTest3" type="radio"> <br> <input value="" name="textTest5" type="text"> <br> <select name="selTest6"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select name="selTest7" multiple=""> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <br> <textarea name="textareaTest8"></textarea> <br> <img src="FoesEnd.jpg" id="img2" alt="test" width="200"> </div> <div style="border: solid 1px #999; margin: 20px 5px; padding: 20px;"> I don't want this to print. </div> <div class="PrintArea area2 all" style="border-color: #999;"> <div>Print Area 2</div> <span style="color: #000777;">print me</span> <span class="test">xyz</span> <br> <input name="chkTest3" value="1" type="checkbox"> <input name="chkTest4" value="2" type="checkbox"> <br> <input value="3" name="rdoTest4" type="radio"> <input value="4" name="rdoTest4" type="radio"> <br> <input value="" name="textTest6" type="text"> <br> <select name="selTest7"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select name="selTest8" multiple=""> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select> <br> <textarea name="textareaTest9"></textarea> <br> <img src="FoesEnd.jpg" id="img2" alt="test" width="200"> </div> </div> <div class="testDialog"> <div class="PrintArea area3 all"> This is Print Area 3 </div> </div> <div style="border: solid 2px #999fff; float: left; margin-left: 20px;" class="SettingsBox"> <div style="width: 400px; padding: 20px;"> <div style="padding: 0 10px 10px;" class="buttonBar"> <div class="button b1">Print</div> <div class="toggleDialog">open dialog</div> </div> <div style="font-weight: bold; border-top: solid 1px #999fff; padding-top: 10px;">Settings</div> <table> <tbody> <tr> <td><input value="popup" name="mode" id="popup" checked="" type="radio"> Popup</td> </tr> <tr> <td style="padding-left: 20px;"><input value="popup" name="popup" id="closePop" type="checkbox"> Close popup</td> </tr> <tr> <td><input value="iframe" name="mode" id="iFrame" type="radio"> IFrame</td> </tr> <tr> <td>Extra css: <input type="text" name="extraCss" size="50" /></td> </tr> <tr> <td><div class="settingName">Print area:</div> <div class="settingVals"> <input type="checkbox" class="selPA" value="area1" checked /> Area 1<br> <input type="checkbox" class="selPA" value="area2" checked /> Area 2<br> <input type="checkbox" class="selPA" value="area3" checked /> Area 3<br> </div> </td> </tr> <tr> <td><div class="settingName">Retain Attributes:</div> <div class="settingVals"> <input type="checkbox" checked name="retainCss" id="retainCss" class="chkAttr" value="class" /> Class <br> <input type="checkbox" checked name="retainId" id="retainId" class="chkAttr" value="id" /> ID <br> <input type="checkbox" checked name="retainStyle" id="retainId" class="chkAttr" value="style" /> Style </div> </td> </tr> <tr> <td><div style="padding: 3px; border: solid 1px #ddd;">Add to head : <input type="checkbox" checked name="addElements" id="addElements" class="chkAttr" /> <pre><meta charset="utf-8" /><br><http-equiv="X-UA-Compatible" content="IE=edge"/></pre> </div> </td> </tr> </tbody></table> </div> </div> <script> $(document).ready(function(){ var dialog = $("div.testDialog").dialog({position : { my : "left top", at : "left bottom+50", of : ".SettingsBox" }, width: "600", title: "Print Dialog Box Contents"}); $(".toggleDialog").click(function(){ dialog.dialog("open"); }); $("div.b1").click(function(){ var mode = $("input[name='mode']:checked").val(); var close = mode == "popup" && $("input#closePop").is(":checked"); var extraCss = $("input[name='extraCss']").val(); var print = ""; $("input.selPA:checked").each(function(){ print += (print.length > 0 ? "," : "") + "div.PrintArea." + $(this).val(); }); var keepAttr = []; $(".chkAttr").each(function(){ if ($(this).is(":checked") == false ) return; keepAttr.push( $(this).val() ); }); var headElements = $("input#addElements").is(":checked") ? '<meta charset="utf-8" />,<meta http-equiv="X-UA-Compatible" content="IE=edge"/>' : ''; var options = { mode : mode, popClose : close, extraCss : extraCss, retainAttr : keepAttr, extraHead : headElements }; $( print ).printArea( options ); }); $("input[name='mode']").click(function(){ if ( $(this).val() == "iframe" ) $("#closePop").attr( "checked", false ); }); }); </script></body></html>- Demo 下载地址：
http://download.csdn.net/download/capmiachael/9974905
阅读全文
0 0
- javascript中的打印（原生js以及jQuery）
- JavaScript javaScript中的Date 以及对原生javaScript的扩展
- jquery以及原生js 如何实现div倒序
- 史上最全ajax（原生JS,javascript版，非jquery）详细注释！
- 原生js封装jquery
- 原生JS(JavaScript)
- 原生javascript取代jquery的一些方法（jQuery-free）
- 原生javascript取代jquery的一些方法（jQuery-free）
- 原生JavaScript中的兼容问题
- 原生js打印插件Print.js
- 抛弃jQuery，拥抱原生JavaScript
- 抛弃jQuery，拥抱原生JavaScript
- jQuery转换JS原生代码
- 原生js和jquery对照
- 使用原生js替换jQuery
- jQuery原生js实现---trim
- 原生JS-jQuery : HTML 操作
- jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承
- 内存泄露检测工具
- drop,delete和truncate的异同
- SQL 正则表达式
- 文件与字符串之间的转换
- Webservice WSDL解析
- javascript中的打印（原生js以及jQuery）
- String和StringBuffer的区别详解
- AccessibilityService
- 免费的网上商城商品管理系统
- 政府安全资讯精选 2017年第七期 美国权威征信公司发生严重数据泄漏 数据安全重要性再突显
- shell练习题，shell基础学习
- java笔记总结
- ArcGIS 10.2之 地图服务的发布、使用
- Linux下WPS提示字体缺失的解决方法
