printArea.js局部打印插件

最新推荐文章于 2021-08-13 10:54:55 发布

christalfuller

最新推荐文章于 2021-08-13 10:54:55 发布

阅读量3.1k

点赞数

分类专栏： js 打印 jquery库文章标签： javascript 浏览器函数插件

本文链接：https://blog.csdn.net/christalfuller/article/details/70226355

版权

js 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

jquery库

5 篇文章 0 订阅

订阅专栏

打印

1 篇文章 0 订阅

订阅专栏

题记：项目中需要打印报告这个需求。当然不能有页眉和页脚，百度试了很多方法都实现不了，目前只能是用户在浏览器里设置，只需设置一次即可，但是这是很不友好的，有待日后解决！上代码：
插件：

// 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>

目前还有一个问题就是在火狐里局部打印不起作用。有待解决！

christalfuller

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
printArea.js局部打印插件

题记：项目中需要打印报告这个需求。当然不能有页眉和页脚，百度试了很多方法都实现不了，目前只能是用户在浏览器里设置，只需设置一次即可，但是这是很不友好的，有待日后解决！上代码：插件：// JavaScript Document(function($) {var printAreaCount = 0;$.fn.printArea = function(){var ele = $(this);
复制链接

扫一扫