正文

@media print 控制打印时生效的样式 用法 可选择式前端打印（二）

郑建华
郑建华 V管理员/ / 0 评论
1211
这篇文章最后更新于1807天前，您需要注意相关的内容是否还可用，如有疑问请联系作者！

    打印预览页面，增加可选择式打印选择。类似的功能之前做过一个，那个是在打印预览之前就弹出窗口进行选择打印内容，再根据选择的内容将html传到打印预览页面，其中还涉及部分无法直接通过html传递的内容，还需要重新生成。那个功能的场景是，已有数据页面，没有打印预览页面，要对若干项数据页面进行可选择式打印。详情请看  可选择式前端打印，window.print() 。而本次的功能场景不同，已有打印预览页面了，只是其中内容非常多，针对不同的用户，需要打印的内容不同，根据需要选择部分内容进行打印。

一、场景需求

     打印内容包含若干项，标题，基础信息，标准要求表，回归检查表，检查内容填写表，并且检查内容填写表中有很多科室，科室也可以选择。

二、效果展示

 打印预览界面如下
image.png

image.png

选择打印内容界面

image.png

  选择指定内容后的打印预览界面

image.png

三、实现方式

1、思路

a、给需要进行区分的项目的DIV添加id。如标题，基本信息，标准要求，回归检查，检查内容填写。

b、给检查内容填写表的科室td添加样式，deptName,deptNameHide。一个用于获取选择项的显示。进行内容处理时，两个都需要用到。

c、调用打印时，生成可选择项内容，并添加选择事件处理。此处使用到了semantic ui的复选框，有全选功能设置，以及回归检查复选框和科室复选框的逻辑控制。检查内容表未选时，科室不可选。检查内容表选中时，默认选中全部的科室。

d、操作选项时，生成临时数组用于记录选中项。

e、确认打印时，先给全部选项，包括科室，添加打印不显示样式。再根据临时数组，判断，给需要显示的项目去除掉打印不显示的样式。

f、添加表格线条样式，调用window.print()打印。

g、打印窗口关闭，恢复表格线条样式。


2、@media print的使用

@media print {
         .noprint,.noprint1{
           display: none !important;
         }
}

在@media print中的样式，只有在调用window.print()打印时，才会生效。所以可以使用该样式灵活控制打印内容，而不需要删除html代码，或添加其他样式影响正常预览界面显示效果。


3、源码

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <#include "./common.html" />
     <style type="text/css">
       @media print {
         .noprint,.noprint1{
           display: none !important;
         }
       }
       .tableLine{
         border-top: 1px solid #000000 !important;
         border-right:1px solid #000000 !important;
         border-collapse:collapse !important;
       }
       .tdLine{
         border-left: 1px solid #000000 !important;
         border-bottom:1px solid #000000 !important;
         border-collapse:collapse !important;
       }
       .layui-table-cell {
          min-height: 28px;
          height: initial;
		}
		.layui-table-cell, .layui-table-tool-panel li {
    		white-space: initial;
		} 
       .layui-table-view .layui-table {width:100%}
    </style>
    
</head>
<body>
    <!-- 标题 -->
    <h1 style="text-align: center;margin-bottom: 10px" id="H1title"></h1>
    <div style="width: 98%;margin: 5px auto" id="checkContenttable">
		<!-- 基本信息 -->
	   	<div id="checkInfo"></div>
        <!-- 检查标准要求部分 -->
      	<div id="checkRequireDiv">
		     <div class="inline fields"  id="checkContentDiv">
				<div style="width:100%">
					<div style="display: inline-block;font-weight: 1000;">检查内容表:</div>
				</div>
			 </div>
		     <table class="ui selectable celled compact table" style="width: 100%" id="my-table">
			     <thead>
				        <tr>
				          <th>项目</th>
				          <th id="show2">分值</th>
				          <th style="width:45%">检查内容</th>
				          <th style="width:30%">备注</th>
				          <th id="show3">各项得分</th>
				        </tr>
			     </thead>
			     <tbody class="ui mini form" id="tbody"></tbody>
		      </table>
      	</div>
        <!-- 回归问题部分 -->
      	<div id="regressionDiv">
		      <!-- 添加循环问题  -->
		      <div class="inline fields"  style="display:none" id="checkTitleDiv">
				<div style="width:100%">
					<div style="display: inline-block;font-weight: 700;">PDCA回归检查项目表:</div>
				</div>
			  </div>
			  <table class="ui selectable celled compact table" style="width: 100%" id="regressionCheckTable">
			        <thead>
				        <tr>
				          <th>序号</th>
				          <th>科室</th>
				          <th>检查项目</th>
				          <th>检查标准</th>
				          <th>上次检查整改问题说明</th>
				          <th>检查结果</th>
				        </tr>
			        </thead>
		        	<tbody class="ui mini form" id="tbody3"></tbody>
		      </table>	
    	 </div>
    </div>
    <!-- 检查内容部分 -->
    <div style="width: 98%;margin: 0 auto;margin-bottom:60px;" id="checkInfotable" >
      	  <h3 style="text-align: center;margin-bottom: 10px" id="h12"></h3>
	      <table class="ui selectable celled compact  table"   style="width: 100%">
			    <thead>
				      <tr>
				        <th style="width: 100px">科室</th>
				        <th id="itemTh" style="display:none;width:12%">项目</th>
				        <th >存在问题</th>
				        <th id="scoreTh" style="display:none;width:10%">分值</th>
				        <th style="width: 110px">值班护士签名</th>
				      </tr>
			    </thead>
		      	<tbody class="ui mini form" id="tbody2"></tbody>
	       </table>
    </div>
    <!-- 打印按钮 -->
    <div class="bottomFixButton noprint1">
	      <a class="ui tiny orange button" onclick="selectPrintContent()" >打印</a>
	      <a class="ui tiny button" id="cancleBtn">关闭</a>
    </div>
</body>
<script type="text/javascript">

    function point(){
      $("td").addClass("tdLine");
      $("table").addClass("tableLine");
      $("th").addClass("tdLine");
      window.print();
      $("td").removeClass("tdLine");
      $("table").removeClass("tableLine");
      $("th").removeClass("tdLine");
    }

	
    /**
   	* 选择打印内容
   	*/
    function selectPrintContent(){
    	var deptNameList=new Array();
    	$("#checkInfotable #tbody2 td.deptName").each(function(){
    		deptNameList.push($(this).html());
    	});
    	
    	//生成列表选项卡
		var htmlContent='<div class="ui form mini" style="margin:5px 5px 10px 5px;">';
		htmlContent+=		'<div class="wide field">';
		htmlContent+=			'<label style="font-size:16px">打印选项</label>';
		htmlContent+=			'<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
		htmlContent+='				 <input type="checkbox" name="optionContentInput" tabindex="0" value="title" checked class="hidden">';
		htmlContent+=				'<label>标题项</label>';
		htmlContent+=			'</div>';
		htmlContent+=			'<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
		htmlContent+='				 <input type="checkbox" name="optionContentInput" tabindex="0" value="base" checked class="hidden">';
		htmlContent+=				'<label>基本信息表</label>';
		htmlContent+=			'</div>';
		htmlContent+=			'<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
		htmlContent+='				 <input type="checkbox" name="optionContentInput" tabindex="0" value="require" checked class="hidden">';
		htmlContent+=				'<label>检查标准要求表</label>';
		htmlContent+=			'</div>';
		htmlContent+=			'<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
		htmlContent+='				 <input type="checkbox" name="optionContentInput" tabindex="0" value="regression" checked class="hidden">';
		htmlContent+=				'<label>回归检查表</label>';
		htmlContent+=			'</div>';
		htmlContent+=			'<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
		htmlContent+='				 <input type="checkbox" name="optionContentInput" tabindex="0" value="check" checked class="hidden">';
		htmlContent+=				'<label>检查内容填写表</label>';
		htmlContent+=			'</div>';
		htmlContent+=		'</div>';
		htmlContent+=		'<div class="wide field" style="">';
		htmlContent+=			'<label style="font-size:16px">打印科室</label>';
		htmlContent+=           '<div class="ui checkbox deptNameSelectAll" style="margin-top:10px;margin-left:20px;font-weight:600"><input type="checkbox" name="deptNameSelectAll" tabindex="0" checked class="hidden"><label>全选</label></div><br/>';
		for(var i=0;i<deptNameList.length;i++){
			htmlContent+=			'<div class="ui checkbox" name="optionDeptName" style="margin-top:10px;margin-left:20px;">';
			htmlContent+='				 <input type="checkbox" name="optionDeptNameInput" tabindex="0" value="'+deptNameList[i]+'" checked class="hidden">';
			htmlContent+=				'<label>'+deptNameList[i]+'</label>';
			htmlContent+=			'</div>';
		}
		htmlContent+=		'</div>';
		htmlContent+='</div>';
		
		var infoSelectArray=new Array();
		var deptNameSelectArray=new Array();
		parent.layer.confirm(htmlContent, {
			  title:'请选择打印内容',
			  skin:"qualityCheckImplementPrintLayer",
			  btn: ['确定','取消'], //按钮
			  success: function(layero, index){
				$(".ui.checkbox[name='optionDeptName']",window.parent.document).each(function(){
					deptNameSelectArray.push($(this).children().eq(0).val());
				});
				$(".ui.checkbox[name='optionContent']",window.parent.document).each(function(){
					infoSelectArray.push($(this).children().eq(0).val());
				});
				
				$(".ui.checkbox",window.parent.document).checkbox({
					onChange: function() {
						infoSelectArray=[];
						deptNameSelectArray=[];
						
						//选项数组
					    $(".ui.checkbox[name='optionContent']",window.parent.document).each(function() {
							var classStr=$(this).attr("class");
						        if($(this).checkbox('is checked') ) {
						        	infoSelectArray.push($(this).children().eq(0).val());
						        }
					    	}
					    );
						
						//如果当前点击的是检查内容填写表
						if($(this).val()=="check"){
							
							$(".ui.checkbox[name='optionDeptName']",window.parent.document).checkbox('set unchecked');
							
							if(($(this).parent().checkbox('is checked') && !$(".ui.checkbox.deptNameSelectAll",window.parent.document).checkbox('is checked'))
							||  (!$(this).parent().checkbox('is checked') && $(".ui.checkbox.deptNameSelectAll",window.parent.document).checkbox('is checked'))
							){
								//触发点击
								$(".ui.checkbox.deptNameSelectAll",window.parent.document).click();
							}
						}
						
						//如果当前选择的是科室 当前是勾选状态，并且当前未勾选检查内容填写表
						if($(this).attr("name")=="optionDeptNameInput" && !$($(".ui.checkbox[name='optionContent']",window.parent.document)[4]).checkbox('is checked') && $(this).parent().checkbox('is checked')){
							//设置取消勾选 
							$(this).parent().checkbox('set unchecked');
						}
						
						var $checkbox = $(".ui.checkbox[name='optionDeptName']",window.parent.document);
						var dept_count=0;
						var dept_names="";
						var dept_ids="";
						if($(this).attr("name")=='deptNameSelectAll'&&$(this).parent().checkbox('is checked')){
							 $checkbox.each(function() {
								 $(this).checkbox('set checked');
							 })
						}else if($(this).attr("name")=='deptNameSelectAll'&&!$(this).parent().checkbox('is checked')){
							 $checkbox.each(function() {
								 $(this).checkbox('set unchecked');
							 });
						}
						
						var flag=true;
						$checkbox.each(function() {
							var classStr=$(this).attr("class");
					        if($(this).checkbox('is checked') ) {
					        	deptNameSelectArray.push($(this).children().eq(0).val());
					        }else{
					        	flag=false;
					        }
		      			});
		      			if(flag){
				        	$(".deptNameSelectAll",window.parent.document).checkbox('set checked');
				        }else{
				        	$(".deptNameSelectAll",window.parent.document).checkbox('set unchecked');
				        }
					},
				});
			  }
			}, function(){
				//首先给全部内容添加打印不显示	
				//标题项
				$("#H1title").addClass("noprint");
				//基本信息
				$("#checkInfo").addClass("noprint");
				//标准要求
				$("#checkRequireDiv").addClass("noprint");
				//回归检查
				$("#regressionDiv").addClass("noprint");
				//检查内容表
				$("#checkInfotable").addClass("noprint");
				//科室项
				$("#tbody2 tr").addClass("noprint");
				//再根据选择项去除显示项的打印不显示
				for(var i=0;i<infoSelectArray.length;i++){
					var info=infoSelectArray[i];
					if("title"==info){
						$("#H1title").removeClass("noprint");
					}else if("base"==info){
						$("#checkInfo").removeClass("noprint");
					}else if("require"==info){
						$("#checkRequireDiv").removeClass("noprint");
					}else if("regression"==info){
						$("#regressionDiv").removeClass("noprint");
					}else if("check"==info){
						$("#checkInfotable").removeClass("noprint");
					}
				}
				
				//去除科室的打印不显示
				for(var i=0;i<deptNameSelectArray.length;i++){
					var deptName=deptNameSelectArray[i];
					$("#tbody2 .deptName[deptname='"+deptName+"']").parent().removeClass("noprint");
					$("#tbody2 .deptNameHide[deptname='"+deptName+"']").parent().removeClass("noprint");
				}
				point();
			})
    }
    
    

    /**
    *  加载回归检查重点表格
    */
    function loadRegressionCheckTable(curPlanId){
    		$.ajax({
    			url:basePath +"/qualityCheckPlan/loadRegressionPoints.do",
    			data:{
    				curPlanId:curPlanId
    			},
    			success:function(msg){
    	          var context = "";
    	          //map项目数据 list
    	          var CheckRegressionList =msg.list;
    	          //表格数据
    	          //mapToplist  遍历项目数据list
    	          for ( var i = 0; i < CheckRegressionList.length; i++) {
    	            var deptName = CheckRegressionList[i].deptName;//科室名称
    	            var checkItem = CheckRegressionList[i].checkItem;//项目名称
    	            var itemRequire = CheckRegressionList[i].itemRequire;//检查标准
    	            var checkInfo = CheckRegressionList[i].checkInfo;//上一次检查整改问题说明
    	            var curMeasureResult = "";//检查结果(自己手填)
    	              
    	            context += "<tr><td style='text-align: center'>"+(i+1)+"</td>";
    	            context += "<td style='text-align: center'>"+deptName+"</td>";
    	            context += "<td style='text-align: center'>"+checkItem+"</td>";
    	            context += "<td style='text-align: left'>"+itemRequire+"</td>";
    	            context += "<td style='text-align: left'>"+checkInfo+"</td>";
    	            context += "<td style='text-align: left'>"+curMeasureResult+"</td></tr>";
    	            	
    	          }
    	          $("#tbody3").html(context);
    	          
    	          if(CheckRegressionList.length>0){
    	        	//有回归检查问题的数据就显示表格
             		 $("#regressionCheckTable").show();
                 	 $("#checkTitleDiv").show();
    	          }else{
    	        	//没有回归检查问题的数据就隐藏表格
             		 $("#regressionCheckTable").hide();
                 	 $("#checkTitleDiv").hide();
    	          }
    			}
    		})
    }


      function getQueryVariable(variable){
	        var query = window.location.search.substring(1);
	        var vars = query.split("&");
	        for (var i=0;i<vars.length;i++) {
	          var pair = vars[i].split("=");
	          if(pair[0] == variable){return pair[1];}
	        }
	        return(false);
      }
	$.ajax({
		url:basePath +"/quality/prewviewInfoData.do",
		data:{
			plan_id:getQueryVariable("plan_id")
		},
		success:function(msg){
          $("#H1title").html(msg.list.projectTemplateInfo.template_name);
          //$("#h12").html(msg.list.projectTemplateInfo.template_name);
          $("#h12").html("检查内容填写表");
          var formType = msg.list.formType;
		  //加载表格(直接加载循环问题的表格)
		  var plainid = getQueryVariable("plan_id");
		  //加载表格数据
          loadRegressionCheckTable(plainid);
          if(formType=="1"){
            $("#show1").show();
            $("#show2").show();
            $("#show3").show();
          }else{
            $("#show1").hide();
            $("#show2").hide();
            $("#show3").hide();
          }
          var context = "";
          //map项目数据 list
          var mapTop =msg.list.mapToplist;
          //mapToplist  遍历项目数据list
          for ( var i = 0; i < mapTop.length; i++) {
            var item_baseName = mapTop[i].itemBaseInfo.item_name;//项目名称
            var item_targetscore = mapTop[i].itemVersion.target_score;//项目目标分数
            //要求数据、评分数据
            var maplist=mapTop[i].maplist;
            var itemContext="";
            var index=0;
            for ( var j = 0; j < maplist.length; j++) {
              var remark=maplist[j].itemRequires.remark;
              if(!remark){
            	  remark="";
              }
              //评分数据
              if (j==0) {
                itemContext+="<td style=\"text-align: left\">"+maplist[j].itemRequires.require_info+"</td>";
                itemContext+="<td>"+remark+"</td>";
                if(formType=="1"){
                  itemContext+="<td>"+maplist[j].itemRequires.score+"</td>";
                }
              }else{
                itemContext+="<tr>";
                itemContext+="<td style='display:none'>"+item_baseName+"</td>";
                if(formType=="1"){
                  itemContext+="<td style='display:none'>"+item_targetscore+"</td>";
                }
                itemContext+="<td style=\"text-align: left\">"+maplist[j].itemRequires.require_info+"</td>";
                itemContext+="<td>"+remark+"</td>";
                if(formType=="1"){
                  itemContext+="<td>"+maplist[j].itemRequires.score+"</td>";
                }
                itemContext+="</tr>";
              }
            }
            index=Number(maplist.length);
            context+="<tr>";
            context+=		"<td rowspan=\""+index+"\">"+item_baseName+"</td>";
            if(formType=="1"){
              context+=		"<td rowspan=\""+index+"\">"+item_targetscore+"</td>";
            }
            context+=		itemContext;
            context+=	"</tr>";
          }
          $("#tbody").html(context);
		}
	})
	
      $.ajax({
        url:basePath +"/qualityCheckImplement/checkContentPrintPersonInfo.do",
        data:{
          planid:getQueryVariable("plan_id")
        },
        success:function(msg){

          var html = "";
          html+='<div style="width: 100%;height: 24px">';
          html+='<label style="font-weight: 700;float: left;padding-right: 10px">计划时间：</label>';
          html+='<div style="float: left">'+msg.data.plan_begin_time+"至"+msg.data.plan_end_time+'</div>';
          html+=' </div>';
          html+='<div style="width: 100%;height: 24px">';
          html+='<label style="font-weight: 700;float: left;padding-right: 10px">计划检查日期：</label>';
          if(!msg.data.planCheckDate2 && msg.data.planCheckDate){
        	  //如果结束时间为空，开始时间不为空 默认取开始时间 兼容老数据
        	  html+='<div style="float: left">'+msg.data.planCheckDate+'至'+msg.data.planCheckDate+'</div>';
          }else if(msg.data.planCheckDate && msg.data.planCheckDate2){
        	  //都有数据时
        	  html+='<div style="float: left">'+msg.data.planCheckDate+'至'+msg.data.planCheckDate2+'</div>';
          }
          html+=' </div>';
          if(msg.data.checkEndTime && msg.data.checkStartTime){
            html+='<div style="width: 100%;height: 24px">';
            html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查时间范围：</label>';
            html+='<div style="float: left">'+msg.data.checkStartTime+"-"+msg.data.checkEndTime+'</div>'
            html+=' </div>';
          }
          html+='<div style="width: 100%;height: 24px">';
          html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查组长：</label>';
          html+='<div style="float: left">'+msg.data.leader_name+'</div>'
          html+=' </div>';
          html+='<div style="width: 100%;height: 24px">';
          html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查成员：</label>';
          html+='<div style="float: left">'+msg.data.member_name+'</div>'
          html+=' </div>';
          html+='<div style="width: 100%;height: 24px">';
          html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查重点：</label>';
          html+='<div style="float: left">'+msg.data.important+'</div>'
          html+=' </div>';
          $("#checkInfo").html(html);
        }
      })

  /*   $(".item").click(function(){
      $(".item").removeClass("active");
      $(this).addClass("active")
      if($(this).attr("data-type")=="1"){
        $("#checkContenttable").show();
        $("#checkInfotable").hide();

      }else{
        $("#checkInfotable").show();
        $("#checkContenttable").hide();
      }
    }) */

      $.ajax({
        type: "POST",
        dataType: "json",
        url: basePath + "/qualityCheckImplement/refreshDeptImplement.do",
        data: {
          planId:getQueryVariable("plan_id")
        },
        success: function (msg) {
          //科室项目map
          var itemMap=msg.itemMap;        
          //表单类型 1打分制 2填空制
          var formType=msg.formType;
          
          if(1==formType){
        	  $("#scoreTh").show();
        	  $("#itemTh").show();
          }else{
        	  $("#scoreTh").hide();
        	  $("#itemTh").hide();
          }
          
          
          var html ="";
          if(msg.mapList.alreadyCheck!=null){
              html=createHtml(msg.mapList.alreadyCheck,formType,itemMap);
          }
          if(msg.mapList.waitCheck!=null){
              html=createHtml(msg.mapList.waitCheck,formType,itemMap);
          }
          if(msg.mapList.draftCheck!=null){
        	  html=createHtml(msg.mapList.draftCheck,formType,itemMap);
          }
          $("#tbody2").html(html)
        }
      })
      
      //创建html
      function createHtml(data,formType,itemMap){
		   	var html="";
			if(data){
				for(i=0;i<data.length;i++){
					  //打分制
			       	  if(1==formType){
			       		  var itemCount=0;
			       		  for(var m in itemMap){
			       			itemCount++;
			       		  }
			       		  var index=0;
			       		  //根据项目数遍历
			       		  for(var m in itemMap){
			       			 index++
			       			  //第一条时，增加rowspan值设置
			       			  if(index==1){
			       				  html+='<tr style="height: 50px">';
			                         html+='<td align="center" rowspan="'+itemCount+'" class="deptName" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
			                         html+='<td>'+itemMap[m]+'</td>';
			                         html+='<td></td>';
			                         html+='<td></td>';
			                         html+='<td rowspan="'+itemCount+'"></td>';
			                         html+='</tr>';
			       			  }else{
			       				  //其他数据，隐藏合并行列
			       				  html+='<tr style="height: 50px">';
			                      html+='<td style="display:none" class="deptNameHide" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
			                      html+='<td>'+itemMap[m]+'</td>';
			                      html+='<td></td>';
			                      html+='<td></td>';
			                      html+='<td style="display:none"></td>';
			                      html+='</tr>';
			       			  }
			       		  }
			       	  //填空制
			       	  }else{
			       		  html+='<tr style="height: 50px">';
		                  html+='<td align="center" class="deptName" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
		                  html+='<td></td>';
		                  html+='<td></td>';
		                  html+='</tr>';
			       	  }
			       }
			}
			return html;
	  }
      
      
      //取消
      $("#cancleBtn").on('click', function() {
       var varindex=parent.layer.getFrameIndex(window.name);
        parent.layer.close(varindex);
      });
</script>
</html>


文章版权声明：除非注明，否则均为华仔部落原创文章，转载或复制请以超链接形式并注明出处。