2017-07-27 62 views
0

其实我打印隐藏div元素,打印隐藏div没有问题。 Kendo(打印文档软件)采用将在DOM上显示的唯一div,这样我在打印之前总是删除隐藏类,在打印div之后我再次添加隐藏类。 但是,当我删除隐藏的类时,它会在我的页面上显示div(将打印)(具有打印按钮的主页面)。但我想要的是有没有什么机制来打印隐藏的div,而无需删除kendo以及jquery打印插件中的隐藏类。 我附上了我的HTML和jQuery代码。使用kendo隐藏div打印

DischargeSummrayPreview: function(dischargesumarayid) { 
 
    var def = $.Deferred(); 
 
    var printcallData = $('#printcall'); 
 
    var PrintCallElement = printcallData.getMyJSONByName(); 
 
    var patientid = $("div#PatientProfile #hfPatientId").val(); 
 
    $.when(Clinical_DischargeSummary.GetPatientBiographic(patientid)).then(function() { 
 
    var ParsedJSON = JSON.parse(PrintCallElement); 
 

 
    // here remove class 
 
    $('#PrintDischargeSummray').removeClass('hidden'); 
 
    kendo.drawing.drawDOM($("#PrintDischargeSummray"), { 
 
     landscape: false, 
 
     scale: 0.6, 
 
     paperSize: "A4", 
 
     //margin: "2cm 3cm ", 
 
     margin: { 
 
     left: "10mm", 
 
     top: "10mm", 
 
     right: "10mm", 
 
     bottom: "30mm" 
 
     }, 
 
     //template: $("#DivOne").removeClass("hidden").html()//$('#' + Create_Letter.params["PanelID"] + " #page-template").html() 
 
    }).then(function(group) { 
 
     $('#PrintDischargeSummray').addClass('hidden'); 
 
     kendo.drawing.pdf.toDataURL(group, function(dataURL) { 
 
     var params = []; 
 
     var result = dataURL.split('data:application/pdf;base64,').join(''); 
 
     $('#SaveClinicalBill').removeClass('hidden'); 
 
     utility.documentPrint(result); 
 
     $('#PrintDischargeSummray').addClass('hidden'); 
 
     def.resolve('ok'); 
 

 
     }); 
 
    }); 
 

 
    }); 
 
},
<div id="PrintDischargeSummray" class="hidden"> 
 
    <!--<h3 align="center"> 
 
      Patient Bill 
 
     </h3>--> 
 
    <!--<p class="underline"> 
 
      Patients's Details. 
 
     </p>--> 
 
    <div class="row"> 
 

 

 
    <div id="HospitailInforamtion" class="col-sm-8"> 
 
     <img src="Content/images/logo-tiny.png" height="100" class="ml-default" alt="MDVision Pvt Ltd." /><br> 
 
     <b>Address:</b>4th Floor, The Enterprise, 1KM Thokar، Multan Road، Lahore. 
 
    </div> 
 

 
    <div id="PatientInvoce" class="col-sm-4"> 
 
     <br> 
 

 
     <h1>Patient Invoice</h1> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="row bg-primary text-white"> 
 
    <h3 align="center"> 
 
     Patient Information 
 
    </h3> 
 
    </div> 
 
    <div class="row"> 
 
    <div id="divPatientName" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblPatientName" class="control-label">Patient Name:&nbsp;&nbsp;</label> 
 

 
           <span id="PatientName"></span> 
 
     </span> 
 
    </div> 
 
    <div id="divAcountNumber" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblMedicRecordNumber" class="control-label">Account No: &nbsp; </label> 
 
           <span id="AcountNumber"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divFatherHusbondName" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblAdmissonDate" class="control-label">Father's/Husbond's Name:&nbsp;&nbsp; </label> 
 
           <span id="FatherHusbondName"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divMedicRecordNumber" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblMedicRecordNumber" class="control-label">MRN: &nbsp; </label> 
 
           <span id="MedicRecordNumber"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divAgeGender" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblAgeGender" class="control-label">Age/Sex:&nbsp;&nbsp; </label> 
 
           <span id="Gender"></span> 
 
     <span id="Age"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divMartialStatus" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblHospitalVisit" class="control-label">Martial Status:&nbsp;&nbsp; </label> 
 
           <span id="MartialStatus"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divInvoiceNo" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblInvoiceNo" class="control-label">Invoice No:&nbsp;&nbsp; </label> 
 
           <span id="InvoiceNo"></span> 
 
     </span> 
 
    </div> 
 

 

 
    <div id="divAddress" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblAdmissonDate" class="control-label">Address:&nbsp;&nbsp; </label> 
 
           <span id="Address"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divBillDate" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblBillDate" class="control-label">Invoice Date:&nbsp;&nbsp;</label> 
 
           <span id="BillDate"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divContactNumber" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblDischargeDate" class="control-label">Contact Number:&nbsp;&nbsp;</label> 
 
           <span id="ContactNumber"></span> 
 
     </span> 
 
    </div> 
 

 
    <div id="divConsultanName" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblConsultanName" class="control-label">Consultant:&nbsp;&nbsp;</label> 
 
           <span id="ConsultanName"></span> 
 
     </span> 
 
    </div> 
 
    <div id="divPatientType" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblPatientType" class="control-label">Patient Type:&nbsp;&nbsp;</label> 
 
           <span id="PatientType"></span> 
 
     </span> 
 
    </div> 
 
    <div id="divAdmissonDate" class="col-sm-6"> 
 
     <span> 
 
           <label id="lblAdmissonDate" class="control-label">Admitted on:&nbsp;&nbsp; </label> 
 
           <span id="AdmissonDate"></span> 
 
     </span> 
 
    </div> 
 
    <!--<div id="divHospitalVisit" class="col-sm-6"> 
 
       <span> 
 
        <label id="lblHospitalVisit" class="control-label">Hospital Visit:&nbsp;&nbsp; </label> 
 
        <span id="HospitalVisit"></span> 
 
       </span> 
 
      </div>--> 
 
    </div> 
 

 
    <!--background-color: blue; 
 
     color: white;--> 
 
    <div class="row bg-primary text-white"> 
 
    <h3 align="center"> Services Charges</h3> 
 
    </div> 
 
    <table class="table" id="PrintTableContent"> 
 
    <thead> 
 
     <tr> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">S.NO</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Date</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Description</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Qty</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Actual Charges</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Discount</font> 
 
     </th> 
 
     <th bgcolor="#ffffff"> 
 
      <font color="black">Balance Amount</font> 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <!--<tr> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
       </tr>--> 
 
    </tbody> 
 
    </table> 
 
    <hr class="divider"> 
 
    <div class="row"> 
 
    <div id="divFaciltyPhone" class="col-sm-10"> 
 
     <span id="ForEmergencyCall">For Emergency help Please Dial.</span> 
 
     <span id="FaciltyPh">For Emergency help Please Dial.</span> 
 
     <p id="Concula"> 
 
     <b>0324-123-4250</b> 
 
     </p> 
 
    </div> 
 
    <div id="divTotallBill" class="col-sm-2"> 
 
     <span> 
 
           <label id="lblTotallBill" class="control-label">Total Bill:&nbsp;&nbsp;</label> 
 
           <span id="TotallBill"></span> 
 
     </span> 
 
    </div> 
 

 

 

 
    <div id="divEmpty1" class="col-sm-10"> 
 
    </div> 
 
    <div id="divAdvacne" class="col-sm-2"> 
 
     <span> 
 
           <label id="lblAdvacne" class="control-label">Advacne:&nbsp;&nbsp;</label> 
 
           <span id="Advacne"></span> 
 
     </span> 
 
    </div> 
 

 

 

 
    <div id="divEmpty1" class="col-sm-10"> 
 
    </div> 
 
    <div id="divDiscount" class="col-sm-2"> 
 
     <span> 
 
           <label id="lblDiscount" class="control-label">Discount:&nbsp;&nbsp;</label> 
 
           <span id="Discount"></span> 
 
     </span> 
 
    </div> 
 

 

 

 
    <div id="divEmpty1" class="col-sm-10"> 
 
    </div> 
 
    <div id="divBalance" class="col-sm-2"> 
 
     <span> 
 
           <label id="lblTotallBill" class="control-label">Due Amount:&nbsp;&nbsp;</label> 
 
           <span id="Balance"></span> 
 
     </span> 
 
    </div> 
 

 
    <hr class="divider"> 
 
    </div> 
 
</div>

回答

0

我有没有JQuery的,也没有剑道的解决方案就像你问但是您可以将CSS规则的介质类型更加具体。看我下面的例子。

@media print { 
    #SaveClinicalBill{display: block;} 
} 

这样你就不必删除然后重新添加类。这一切都将为您处理,使用CSS。

Reference