printArea.js局部打印插件

最新推荐文章于 2021-08-13 10:54:55 发布
最新推荐文章于 2021-08-13 10:54:55 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： js 打印 jquery库 文章标签： javascript 浏览器 函数 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
关注
专栏目录
JQuery.PrintArea.js的局部打印 “回调”
qq_18878455的博客
09-12 1386
JQuery.PrintArea.js的局部打印回调 前言：这里所谓的回调只是可以调用预先写好的函数而已 至于JQuery.PrintArea.js怎么使用我就不多加述说了，在JQuery.PrintArea.js的源码里有详细说明 Example: * Print Button: <div id="print_button">Print</div> * ...
jquery.PrintArea.js
08-25
HTML局部打印，区域打印jquery插件：jquery.PrintArea.js
jquery.printArea.js
11-17
调用示例： $(function(){ //给按钮绑定打印事件 $("#btnPrint").bind("click",function(event){ $("#divI").printArea(); $("#divII").printArea(); }); });
局部打印插件 jquery.PrintArea.js
weixin_34198797的博客
05-09 122
(function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount)...
printArea.js
jiangzhanweiabc的博客
09-18 1317
(function ($) {     var counter = 0;     var modes = { iframe: "iframe", popup: "popup" };     var defaults = { mode: modes.iframe,         popHt: 500,         popWd: 400,         popX: 200,
打印功能通用的jquery.PrintArea.js
11-30
该js文件与本人前面博客发表的打印功能一致，详情请看本人博客关于打印模块的功能介绍，前后端实现代码完整
可局部打印的网页打印插件jQuery.PrintArea.zip
09-21
"jQuery.PrintArea"是一个优秀的局部打印插件，它允许开发者选择页面中的特定区域进行打印，而不是整个网页。这个插件的压缩包"jQuery.PrintArea.zip"包含了必要的文件，如HTML示例和JavaScript文件。 首先，我们要...
PrintArea.js官方demo
最新发布
09-02
PrintArea.js官方demo 实现精准局部打印内容
jquery.PrintArea.js 实现打印局部页面
NetSnake_的博客
05-03 1066
js代码： (function () {      var printAreaCount = 0;) { var printAreaCount = 0; .fn.printArea = function () { var ele = (this);varidPrefix=“printArea”;removePrintArea(idPrefix+printA
js前端局部打印
07-09
jqprint是一个基于jQuery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以轻松实现打印网页上的某个区域，这是个亮点。
可局部打印的网页打印插件jQuery.PrintArea
06-10
这是一款基于jquery实现页面打印可局部打印特效代码，网页打印插件jQuery.PrintArea下载。
jquery.选择局部打印插件
10-15
修正局部打印对象，包括自己的样式都显示出来。
jquery.PrintArea.js实现打印发货单功能
02-21
本项目用jquery.PrintArea.js实现打印功能，实现一个打印发货单的功能。主要用div和table来实现,可以运行
jquery.printarea.js
11-29
jquery.printarea.js 提供下载
jquery.PrintArea.js实现打印分页功能
whalesharks的博客
08-13 1131
只需要在局部打印页面最后加上下行代码即可实现打印分页 <div style="page-break-after: always;"></div>
asp.net 实现在线打印功能，jQuery打印插件PrintArea实现自动分页
angou6476的博客
10-18 290
使用的组件：jQuery打印插件PrintArea，有兴趣的可以研究一下。 使用方法略过，这里将介绍如何实现打印多页是可以分页。 现在提供两种方法思路： 1、根据特定的打印机型号和使用的纸张类型，然后用JS来算出每页多高，按照每张纸的高度来进行适当的增减高度。（这种方式缺点就是只能针对单中类型的纸张，计算十分的繁琐，要些很多加减法 -_-);）。 参考A4纸高度的网页：http:...
使用PrintArea实现 JS打印
zlihong2004的博客
11-02 1648
前些时间业务需要有打印功能， 比较几个开源的JS打印框架， 最后选择了PrintArea 功能强大，使用简单。 简单的封装了一下， 内容如下 function printDiv(id){ var extraHead = ','; var op = {mode : "popup", popClose : false, extraHead:extraHea...
jquery.printarea.js下载
07-14
通过使用jquery.printarea.js插件，我们可以实现自定义的打印设置，例如选择打印区域、设置打印纸张大小、设置打印页眉页脚等等。这样，我们就可以在网页中实现更加灵活和个性化的打印功能，提高用户体验。 总之，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值