【问题标题】:Hidden div print using kendo使用剑道隐藏 div 打印
【发布时间】:2017-07-27 17:16:36
【问题描述】:

实际上,我正在打印隐藏的 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>

【问题讨论】:

    标签: jquery html kendo-ui


    【解决方案1】:

    我有一个没有 JQuery 和 Kendo 的解决方案,就像你问的那样,但是你可以应用 CSS 规则媒体类型来更具体。请参阅下面的示例。

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

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

    Reference

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-03-19
      • 1970-01-01
      • 2012-08-26
      • 2020-06-18
      • 2021-06-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多