printArea.js局部打印插件
来源：互联网 发布：货到付款的淘宝有哪个 编辑：程序博客网 时间：2024/05/21 09:37
题记：项目中需要打印报告这个需求。当然不能有页眉和页脚，百度试了很多方法都实现不了，目前只能是用户在浏览器里设置，只需设置一次即可，但是这是很不友好的，有待日后解决！上代码：
插件：
// JavaScript Document(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;// alert(doc)// doc.open();$(document).find("link").filter(function(){return $(this).attr("rel").toLowerCase() == "stylesheet";}).each(function(){doc.open(); doc.write('<link type="text/css" rel="stylesheet" href="' +$(this).attr("href") + '" >'); // alert($(this).attr("href")) });doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() + '</div>');doc.close();var frameWindow = iframe.contentWindow;// alert(frameWindow)frameWindow.close();frameWindow.focus();frameWindow.print();frameWindow.focus();}var removePrintArea = function(id){$( "iframe#" + id ).remove();};})(jQuery);doc.open();是我后加上去的，解决的是谷歌出现空白页的问题，但是我的谷歌还是依然有时会出现空白页的问题，加了doc.open(）后样式就打印不出来了，解决方法是把样式写到要打印区里，代码如下：
<div class="report"> <style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0;padding:0;}body,button,input,select,textarea{ font-family: "Microsoft Yahei", "΢ÈíÑźÚ", Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; word-wrap: break-word; color: #333333;}input,select,textarea{ font-size:100%;}div:focus{ outline:none;}ol,ul,li { list-style:none;}.report{ width:794px; min-height:1090px; margin:0 auto; background-color:#fff;}.HAMD,.SCL,.OCD,.CGI{ width:80%; padding:10%;}.hamd_title,.scl_title,.ocd_title,.cgi_title{ text-align: center; font-size:22px; border-bottom:2px solid #000; padding:6px;}.patient{ overflow: hidden; border-bottom: 1px solid #000;}.patient ul{ width:28%; float:left; padding:8px 15px 8px 15px; font-size:16px;}.patient ul li span:nth-of-type(2n-1){ margin-right:10px;}.list,.score{ text-align: center; padding:8px 0 8px 0; font-size:16px; border-bottom: 1px solid #000;}.list span,.score span{ display: inline-block; width:16%;}.SCL .list span:nth-of-type(2n){ width:9%;}.SCL .list span:nth-of-type(2n-1){ width:23%;}.SCL .score span:nth-of-type(2n){ width:9%;}.SCL .score span:nth-of-type(2n-1){ width:23%;}.score span{ margin-bottom: 5px;}.patientInfo{ padding:15px 0 15px 0; font-size:16px; border-bottom: 2px solid #000;}.doctor{ font-size:16px; padding:8px 0 8px 0;}.doctor ul{ overflow: hidden; margin-bottom: 8px;}.firstDiv{ width:60%; float:left;}.secondDiv{ width:35%; float:right;}.tip{ margin-top:20%; font-size:14px; text-align: right;} </style> {%for val in ret['formid']%} {% if val==31%} <!--抑郁表HAMD--> <ul class="HAMD" style="page-break-after: always;"> <li class="hamd_title">汉密尔顿抑郁量表(HAMD)测评结果报告</li> <li class="patient"> {%for item in ret['info']%} <ul> <li><span>编号:</span><span></span></li> <li><span>院号:</span><span>{{item['emrid']}}</span></li> <li><span>姓名:</span><span>{{item['name']}}</span></li> <li><span>学历:</span><span>{{item['edu']}}</span></li> </ul> <ul> <li><span>床位号:</span><span></span></li> <li><span>年龄:</span><span>{{item['age']}}</span></li> <li><span>婚姻:</span><span>{{item['marry']}}</span></li> <li><span>性别:</span><span>{{item['sex']}}</span></li> </ul> <ul> <li><span>职业:</span><span></span></li> <li><span>部门:</span><span></span></li> <li><span>测评日期:</span><span>{{item['time']}}</span></li> </ul> {%endfor%} </li> <li class="list"> <span>项目</span> <span>总分</span> <span>均分</span> <span>项目</span> <span>总分</span> <span>均分</span> </li> <li class="score"> <span>总分</span> <span>{{ret['yiyu']['total']['0']}}</span> <span>{{ret['yiyu']['average']['0']}}</span> <span>焦虑/躯体化</span> <span>{{ret['yiyu']['total']['1']}}</span> <span>{{ret['yiyu']['average']['1']}}</span> <span>体重</span> <span>{{ret['yiyu']['total']['2']}}</span> <span>{{ret['yiyu']['average']['2']}}</span> <span>认识障碍</span> <span>{{ret['yiyu']['total']['3']}}</span> <span>{{ret['yiyu']['average']['3']}}</span> <span>日夜变化</span> <span>{{ret['yiyu']['total']['4']}}</span> <span>{{ret['yiyu']['average']['4']}}</span> <span>迟缓</span> <span>{{ret['yiyu']['total']['5']}}</span> <span>{{ret['yiyu']['average']['5']}}</span> <span>睡眠障碍</span> <span>{{ret['yiyu']['total']['6']}}</span> <span>{{ret['yiyu']['average']['6']}}</span> <span>绝望感</span> <span>{{ret['yiyu']['total']['7']}}</span> <span>{{ret['yiyu']['average']['7']}}</span> </li> <li class="patientInfo"> <p style='text-indent: 2em;margin-bottom: 2%;'>按照Davis JM的划界分，24项总分超过35分，可能为严重抑郁；超过20分，可能为是轻度或中度抑郁；如果小于8分，患者就没有抑郁症状。 </p> <p style='text-indent: 2em;'> 抑郁症是一种常见的心理疾病，国际公认的人群发病率为5%左右，主要是由于脑内五羟色胺等神经介质功能失调。抑郁症是一种完全可以治好的疾病，治疗越早，疗效越好。记住：抑郁症完全可以治好，只要你愿意！ </p> </li> <li class="doctor"> <ul> <div class='firstDiv'><span style='margin-right:10px;'>医院:</span><span>清华大学玉泉医院</span></div> <div class='secondDiv'><span>报告人:</span><span style='font-weight:bold;'>wudi</span></div> </ul> <ul> <div class='firstDiv'>测评结果仅供参考</div> <div class='secondDiv' style='font-weight:bold;'>{{ret['time']}}</div> </ul> </li> <li class='tip'>技术支持：北京不器科技发展有限公司</li> </ul> {%endif%} {%endfor%} {%for val in ret['formid']%} {% if val==24%} <!--自测表SCL--> <ul class="SCL" style="page-break-after: always;"> <li class="scl_title">症状自评量表(SCL-90)测评结果报告</li> <li class="patient"> {%for item in ret['info']%} <ul> <li><span>编号:</span><span></span></li> <li><span>院号:</span><span>{{item['emrid']}}</span></li> <li><span>姓名:</span><span>{{item['name']}}</span></li> <li><span>学历:</span><span>{{item['edu']}}</span></li> </ul> <ul> <li><span>床位号:</span><span></span></li> <li><span>年龄:</span><span>{{item['age']}}</span></li> <li><span>婚姻:</span><span>{{item['marry']}}</span></li> <li><span>性别:</span><span>{{item['sex']}}</span></li> </ul> <ul> <li><span>职业:</span><span></span></li> <li><span>部门:</span><span></span></li> <li><span>测评日期:</span><span>{{item['time']}}</span></li> </ul> {%endfor%} </li> <li class="list"> <span>项目</span> <span>评分</span> <span>项目</span> <span>评分</span> <span>项目</span> <span>评分</span> </li> <li class="score"> <span>总分</span> <span>{{ret['SCL']['total']['0']}}</span> <span>总均分</span> <span>{{ret['SCL']['average']['0']}}</span> <span></span> <span></span> <span>阳性项目数</span> <span>{{ret['SCL']['total']['1']}}</span> <span>阴性项目数</span> <span>{{ret['SCL']['total']['2']}}</span> <span>阳性症状均分</span> <span>{{ret['SCL']['average']['1']}}</span> <span>躯体化因子分</span> <span>{{ret['SCL']['average']['2']}}</span> <span>强迫症状因子分</span> <span>{{ret['SCL']['average']['3']}}</span> <span>人际关系敏感因子分</span> <span>{{ret['SCL']['average']['4']}}</span> <span>抑郁因子分</span> <span>{{ret['SCL']['average']['5']}}</span> <span>焦虑因子分</span> <span>{{ret['SCL']['average']['6']}}</span> <span>敌对因子分</span> <span>{{ret['SCL']['average']['7']}}</span> <span>恐怖因子分</span> <span>{{ret['SCL']['average']['8']}}</span> <span>偏执因子分</span> <span>{{ret['SCL']['average']['9']}}</span> <span>精神病性因子分</span> <span>{{ret['SCL']['average']['10']}}</span> <span>其他因子分</span> <span>{{ret['SCL']['average']['11']}}</span> <span></span> <span></span> <span></span> <span></span> </li> <li class="patientInfo"> <h4 style='text-align: center;'>1388名中国正常人SCL-90统计指标结果</h4> <img src="../public/img/SCL.png" style='width:100%;' > <p style='text-indent: 2em;'>总分超过160分，或者阳性项目数超过43项，或任一因子分超过2分，可以考虑筛查阳性，需进一步检查。</p> </li> <li class="doctor"> <ul> <div class='firstDiv'><span style='margin-right:10px;'>医院:</span><span>清华大学玉泉医院</span></div> <div class='secondDiv'><span>报告人:</span><span style='font-weight:bold;'>wudi</span></div> </ul> <ul> <div class='firstDiv'>测评结果仅供参考</div> <div class='secondDiv' style='font-weight:bold;'>{{ret['time']}}</div> </ul> </li> <li class='tip'>技术支持：北京不器科技发展有限公司</li> </ul> {%endif%} {%endfor%} <!--yale-brown强迫症状问卷--> {%for val in ret['formid']%} {% if val==32%} <ul class="OCD" style="page-break-after: always;"> <li class="ocd_title">强迫症状问卷 测评结果报告</li> <li class="patient"> {%for item in ret['info']%} <ul> <li><span>编号:</span><span></span></li> <li><span>院号:</span><span>{{item['emrid']}}</span></li> <li><span>姓名:</span><span>{{item['name']}}</span></li> <li><span>学历:</span><span>{{item['edu']}}</span></li> </ul> <ul> <li><span>床位号:</span><span></span></li> <li><span>年龄:</span><span>{{item['age']}}</span></li> <li><span>婚姻:</span><span>{{item['marry']}}</span></li> <li><span>性别:</span><span>{{item['sex']}}</span></li> </ul> <ul> <li><span>职业:</span><span></span></li> <li><span>部门:</span><span></span></li> <li><span>测评日期:</span><span>{{item['time']}}</span></li> </ul> {%endfor%} </li> <li class="list"> <span>项目</span> <span>评分</span> <span></span> <span></span> <span></span> <span></span> </li> <li class="score"> <span>总分</span> <span>{{ret['YLB']['total']['0']}}</span> <span></span> <span></span> <span></span> <span></span> </li> <li class="patientInfo"> <p style='text-indent:2em;margin-bottom: 2%;'>轻度严重6－15分(单纯的强迫思维或强迫行为，仅需要6-9分) 处于轻度严重的强迫症患者，其症状已经对患者的生活、学习或职业开始造成一定的影响，患者的症状会随着环境和情绪的变化不断的波动，如果不能尽早的解决，很容易会朝着严重的程度发展、泛化，此时是治疗效果最理想的时期，建议尽早治疗。 </p> <p style='text-indent:2em;margin-bottom: 2%;'>中度严重16－25分(单纯的强迫思维或强迫行为，仅需要10-14分) 这属于中等的强迫症状，表示症状的频率或严重程度已经对生活、学习或职业造成明显的障碍，导致患者可能无法有效执行其原有的角色功能，甚至在没有出现有效的改善前，可能导致抑郁症状，甚至出现自杀念头，必须接受心理治疗或者药物治疗。 </p> <p style='text-indent:2em;'>重度严重25分以上(单纯的强迫思维或强迫行为，仅需要15分以上) 此时，患者的强迫症状已经非常严重，完全无法执行原有的角色功能，甚至连衣食住行等生活功能都无法进行。通常患者已经无法出门，将自己禁锢家中，无时无刻都有强迫思考，无时无刻都在执行强迫行为。重度严重的患者极易出现抑郁症状，通常需要强制治疗 </p> </li> <li class="doctor"> <ul> <div class='firstDiv'><span style='margin-right:10px;'>医院:</span><span>清华大学玉泉医院</span></div> <div class='secondDiv' ><span>报告人:</span><span style='font-weight:bold;'>wudi</span></div> </ul> <ul> <div class='firstDiv'>测评结果仅供参考</div> <div class='secondDiv' style='font-weight:bold;'>{{ret['time']}}</div> </ul> </li> <li class='tip'>技术支持：北京不器科技发展有限公司</li> </ul> {%endif%}{%endfor%}{%for val in ret['formid']%} {% if val==40%} <!--抑郁表HAMD--> <ul class="CGI" style="page-break-after: always;"> <li class="cgi_title">临床总体印象量表（CGI）测评结果报告</li> <li class="patient"> {%for item in ret['info']%} <ul> <li><span>编号:</span><span></span></li> <li><span>院号:</span><span>{{item['emrid']}}</span></li> <li><span>姓名:</span><span>{{item['name']}}</span></li> <li><span>学历:</span><span>{{item['edu']}}</span></li> </ul> <ul> <li><span>床位号:</span><span></span></li> <li><span>年龄:</span><span>{{item['age']}}</span></li> <li><span>婚姻:</span><span>{{item['marry']}}</span></li> <li><span>性别:</span><span>{{item['sex']}}</span></li> </ul> <ul> <li><span>职业:</span><span></span></li> <li><span>部门:</span><span></span></li> <li><span>测评日期:</span><span>{{item['time']}}</span></li> </ul> {%endfor%} </li> <li class="list"> <span>项目</span> <span>评分</span> <span></span> <span>项目</span> <span>评分</span> <span></span> </li> <li class="score"> <span>病情严重程度</span> <span>{{ret['CGI']['total']['0']}}</span> <span></span> <span>疗效总评</span> <span>{{ret['CGI']['total']['1']}}</span> <span></span> <span>疗效</span> <span>{{ret['CGI']['total']['2']}}</span> <span></span> <span>副反应</span> <span>{{ret['CGI']['total']['3']}}</span> <span></span> <span>疗效指数</span> <span>{{ret['CGI']['total']['4']}}</span> <span></span> <span></span> <span></span> <span></span> </li> <li class="patientInfo"> 经测试： {% if ret['CGI']['total']['0']==4%} 1.病情中度； {% elseif ret['CGI']['total']['0']>4%} 1.病情严重； {% elseif ret['CGI']['total']['0']==1%} 1.正常、完全没病； {%else%} 1.病情轻度； {%endif%} {% if ret['CGI']['total']['1']==4%} 2.病情无改变； {% elseif ret['CGI']['total']['1']>4%} 2.病情有恶化； {% elseif ret['CGI']['total']['1']==1%} 2.病情改善极为明显； {%else%} 2.病情稍有改善； {%endif%} {% if ret['CGI']['total']['4']>1%} 3.很有疗效； {% elseif ret['CGI']['total']['4']==1%} 3.有疗效； {% else%} 3.没疗效； {%endif%} </li> <li class="doctor"> <ul> <div class='firstDiv'><span style='margin-right:10px;'>医院:</span><span>清华大学玉泉医院</span></div> <div class='secondDiv'><span>报告人:</span><span style='font-weight:bold;'>wudi</span></div> </ul> <ul> <div class='firstDiv'>测评结果仅供参考</div> <div class='secondDiv' style='font-weight:bold;'>{{ret['time']}}</div> </ul> </li> <li class='tip'>技术支持：北京不器科技发展有限公司</li> </ul> {%endif%} {%endfor%}<!-- 打印 --> </div></div>即：
<div class='print'> <style></style></div><script> $('.print').printArea();</script>目前还有一个问题就是在火狐里局部打印不起作用。有待解决！
0 0
- printArea.js局部打印插件
- 局部打印插件 jquery.PrintArea.js
- 局部打印插件 jquery.PrintArea.js
- jquery.PrintArea.js打印插件
- jquery.PrintArea.js 实现打印局部页面
- js打印 PrintArea-master
- jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现
- jQuery打印插件PrintArea实现
- jquery.printarea打印插件字体设置问题
- jquery.PrintArea.js 打印整个页面问题
- printArea.js
- jQuery插件PrintArea实现javascript打印页面某区域功能
- jquery插件printArea打印、corner圆角使用
- jquery.PrintArea 局部打印 去掉页眉页脚，但在IE有些版本中不管用。
- jQuery.printArea 插件Bug
- js局部打印
- JS 局部打印
- js 局部打印
- ElasticSearch速学
- 团体程序设计天梯赛L2-024部落
- 自定义密码框 让你实现一格一格输密码
- StringBuider源码解析
- Hibernate 一 JDBC简介
- printArea.js局部打印插件
- 面试7之请编写一个算法，若N阶方阵中某个元素为0，则将其所在的行与列清零。
- bzoj 1430: 小猴打架 （prufer序列+数论）
- lombok 简化java代码注解 理解
- 安装torch与luarocks的一些问题
- String与StringBuffer的区别
- 第一章 Web MVC简介
- 455. Assign Cookies
- java,android更改，设置系统时间
