使用kendo隐藏div打印

时间:2017-07-27 09:05:53

标签: jquery html kendo-ui

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



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我有一个没有JQuery的解决方案,也没有像你要求的剑道,但你可以应用CSS规则媒体类型更具体。请参阅下面的示例。

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

这样您就不必删除然后重新添加类。它将全部使用CSS处理。

Reference