printArea.js局部打印插件

題記：項目中需要打印報告這個需求。當然不能有頁眉和頁腳，百度試了很多方法都實現不了，目前只能是用戶在瀏覽器裏設置，只需設置一次即可，但是這是很不友好的，有待日後解決！上代碼：
插件：

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

目前還有一個問題就是在火狐裏局部打印不起作用。有待解決！

printArea.js局部打印插件

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

URL encode 意識

本地調試使用https協議的方法

input或textarea框動態限制字數

什麼是 SSH 以及常見 ssh 用法

printArea.js局部打印插件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結