JavaScript实现局部打印
2016-07-27 13:28
441 查看
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(240, 240, 240);"> 1、</span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在页面中 默认调用window.print() 方法可以打印当前页面,但是默认是完整的页面,但是如果需要打印局部页面 ,可以使用如下代码(只是JavaScript代码,不用JQuery) </span>
FormPrint :打印按钮
引入这个文件,然后把 要打印的内容包裹在<div>中, 调用Printarea()方法
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><script type="text/javascript"> //表单打印 $('#FormPrint').click(function () { var oper=1; 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>
FormPrint :打印按钮
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> <!--startprint1--> 要打印的内容 <!--endprint1--> oper:开始结束标记中的序号</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">第二种方法:JQuery :</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript">(function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount); printAreaCount++; var iframeId = idPrefix + printAreaCount; var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'; iframe = document.createElement('IFRAME'); $(iframe).attr({ style: iframeStyle, id: iframeId }); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; $(document).find("link").filter(function () { return $(this).attr("rel").toLowerCase() == "stylesheet"; }).each( function () { doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >'); }); doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() + '</div>'); doc.close(); var frameWindow = iframe.contentWindow; frameWindow.close(); frameWindow.focus(); frameWindow.print(); } var removePrintArea = function (id) { $("iframe#" + id).remove(); }; })(jQuery);
引入这个文件,然后把 要打印的内容包裹在<div>中, 调用Printarea()方法
相关文章推荐
- jsp page指令
- [php学习十一]javaScript的基本练习2
- 关于javascript中=的返回值
- 关于javascript中=的返回值
- js学习笔记
- js学习笔记
- js学习笔记
- 解决JavaScript中使用$.ajax方式提交数组参数
- checkbox全选与反选
- JavaScript操作cookie
- JSON数据与XML数据各有哪些优缺点
- Javascript动画学习
- 客户端JavaScript-如何执行
- Arcgis api for JavaScript 跨域配置(在线编辑问题)
- 你真的了解JavaScript中的局部变量和全局变量吗?
- Ajax(2)--data format
- js实现textarea高度根据内容自适应
- JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
- JavaScript事件委托的技术原理
- js实现textarea高度根据内容自适应