2017-07-27 90 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