实际上,我正在打印隐藏的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: </label>
<span id="PatientName"></span>
</span>
</div>
<div id="divAcountNumber" class="col-sm-6">
<span>
<label id="lblMedicRecordNumber" class="control-label">Account No: </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: </label>
<span id="FatherHusbondName"></span>
</span>
</div>
<div id="divMedicRecordNumber" class="col-sm-6">
<span>
<label id="lblMedicRecordNumber" class="control-label">MRN: </label>
<span id="MedicRecordNumber"></span>
</span>
</div>
<div id="divAgeGender" class="col-sm-6">
<span>
<label id="lblAgeGender" class="control-label">Age/Sex: </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: </label>
<span id="MartialStatus"></span>
</span>
</div>
<div id="divInvoiceNo" class="col-sm-6">
<span>
<label id="lblInvoiceNo" class="control-label">Invoice No: </label>
<span id="InvoiceNo"></span>
</span>
</div>
<div id="divAddress" class="col-sm-6">
<span>
<label id="lblAdmissonDate" class="control-label">Address: </label>
<span id="Address"></span>
</span>
</div>
<div id="divBillDate" class="col-sm-6">
<span>
<label id="lblBillDate" class="control-label">Invoice Date: </label>
<span id="BillDate"></span>
</span>
</div>
<div id="divContactNumber" class="col-sm-6">
<span>
<label id="lblDischargeDate" class="control-label">Contact Number: </label>
<span id="ContactNumber"></span>
</span>
</div>
<div id="divConsultanName" class="col-sm-6">
<span>
<label id="lblConsultanName" class="control-label">Consultant: </label>
<span id="ConsultanName"></span>
</span>
</div>
<div id="divPatientType" class="col-sm-6">
<span>
<label id="lblPatientType" class="control-label">Patient Type: </label>
<span id="PatientType"></span>
</span>
</div>
<div id="divAdmissonDate" class="col-sm-6">
<span>
<label id="lblAdmissonDate" class="control-label">Admitted on: </label>
<span id="AdmissonDate"></span>
</span>
</div>
<!--<div id="divHospitalVisit" class="col-sm-6">
<span>
<label id="lblHospitalVisit" class="control-label">Hospital Visit: </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: </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: </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: </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: </label>
<span id="Balance"></span>
</span>
</div>
<hr class="divider">
</div>
</div>
&#13;
答案 0 :(得分:0)
我有一个没有JQuery的解决方案,也没有像你要求的剑道,但你可以应用CSS规则媒体类型更具体。请参阅下面的示例。
@media print {
#SaveClinicalBill{display: block;}
}
这样您就不必删除然后重新添加类。它将全部使用CSS处理。