我正在为客户设计收据生成器。客户使用添加按钮添加付款收据，在他们点击提交后，他们可以选择将其转换为 pdf 或打印它。但是，由于我的表单包含 textxt 字段。它没有正确打印它并且只输出填充的内容。我尝试使用 window.print 但它的显示框也是如此。不确定如何进行。下面是代码:
我使用了 javascript 但无法添加类
$('button[name="e_subPrint"]').click(function(){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var html = getPrintHtml("e_print");
mywindow.document.write(html);
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
});
function getPrintHtml(print){
var center = $('#'+print +' input[name="center"]').val();
var dated = $('#'+print +' input[name="dated"]').val();
var payment = $('#'+print +' input[name="payment"]').val();
var studname = $('#'+print +' input[name="studname"]').val();
var cnum = $('#'+print +' input[name="cnum"]').val();
var pnum = $('#'+print +' input[name="pnum"]').val();
var sum = $('#'+print +' input[name="sum"]').val();
var amt = $('#'+print +' input[name="amt"]').val();
var chnum = $('#'+print +' input[name="chnum"]').val();
var chdate = $('#'+print +' input[name="chdate"]').val();
var chbank = $('#'+print +' input[name="chbank"]').val();
var course = $('#'+print +' input[name="course"]').val();
var tfees = $('#'+print +' input[name="tfees"]').val();
var sgst = $('#'+print +' input[name="sgst"]').val();
var cgst = $('#'+print +' input[name="cgst"]').val();
var gtotal = $('#'+print +' input[name="gtotal"]').val();
var html = "<html><table>\n\
<tr><td>CENTER: </td><td>"+center+"</td></tr>\n\
<tr><td>DATED: </td><td>"+dated+"</td></tr>\n\
<tr><td>PAYMENT: </td><td>"+payment+"</td></tr>\n\
<tr><td>STUDENT NAME: </td><td>"+studname+"</td></tr>\n\
<tr><td>CONTACT NUMBER: </td><td>"+cnum+"</td></tr>\n\
<tr><td>PARENTAL CONTACT: </td><td>"+pnum+"</td></tr>\n\
<tr><td>TOTAL AMOUNT: </td><td>"+amt+"</td></tr>\n\
<tr><td>CHEQUE NUMBER: </td><td>"+chnum+"</td></tr>\n\
<tr><td>CHEQUE DATE: </td><td>"+chdate+"</td></tr>\n\
<tr><td>CHEQUE BANK: </td><td>"+chbank+"</td></tr>\n\
<tr><td>COURSE: </td><td>"+course+"</td></tr>\n\
<tr><td>TUITION FEES: </td><td>"+tfees+"</td></tr>\n\
<tr><td>SGST: </td><td>"+sgst+"</td></tr>\n\
<tr><td>CGST: </td><td>"+cgst+"</td></tr>\n\
<tr><td>GRAND TOTAL: </td><td>"+gtotal+"</td></tr>\n\
\n\
</table></html>";
return html;
}
});
这是 HTMl
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Receipt</h4>
</div>
<div class="modal-body">
<form method="post" action="controller/pdf.php">
<div id="print">
<div class="row">
<div class="col-md-7">
<img src="asset/logo.png" alt="Edumentor">
</div>
<div class="col-md-5">
<p style="font-size:15px;">Head Office: 80 Defence Enclave Delhi-110092
<br>
Tel : +91 9650499917,9650499918 web:wwww.edumentor.co.in
<br>
GST No.07AACCE9830DIZS
</p>
<br>
<p><strong>Receipt Number:</strong>
<?php
$val = getReceiptNum();
echo $val;
?>
</p>
</div>
</div>
<br>
<div id="values">
<div class="row">
<div class="form-inline">
<div style="text-align:right;" class="col-sm-8">
<label for="centre">Centre: </label>
<input name="center" id="centre" type="text" class="form-control" name="centre">
</div>
<div class="col-sm-4">
<label for="date">Dated:</label>
<input id="dated" name="dated" type="date" class="form-control" name="date">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="pcentre">Payment Centre:</label>
<input name="payment" id="payment" type="text" class="form-control" name="pcentre">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<label for="stuname">Student Name:</label>
<input name="studname" id="stuname" type="text" class="form-control" name="stuname">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-inline">
<div class="col-sm-12">
<div class="col-sm-6">
<label for ="stucont">Contact Number:</label>
<input name="cnum" id="cnum" type="text" class="form-control" name="stucont">
</div>
<div class="col-sm-6">
<label for="stupcont">Parental Contact:</label>
<input name="pnum" id="pnum" type="text" class="form-control" name="stupcont">
</div>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<tbody>
<tr>
<td>
<div class="form-inline">
<label for="sfees">Sum of Rupees(In Words)</label>
<input name="sum" id="sum" type="text" class="form-control" name="sfees" size="30">
</div>
</td>
<td>
<div class="form-inline">
<label for="">Total Amount :</label>
<input name="amt" id="amt" type="number" name="snumfees" class="form-control" size="10" placeholder="Enter Amount">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col-sm-12">
<label>Paid by: </label>
<label class="radio-inline"><input id="cash" value="cash" type="radio" name="optradio">Cash</label>
<label class="radio-inline"><input id="cheque" type="radio" value="cheque" name="optradio">Cheque</label>
</div>
<div class="col-sm-4">
<input name="chnum" id="chnum" type="text" name="cheqno" class="form-control" placeholder="Enter cheque number">
</div>
<div class="col-sm-4">
<input name="chdate" id="chdate" type="date" name="cheqdate" class="form-control" placeholder="Enter cheque date">
</div>
<div class="col-sm-4">
<input name="chbank" id="chbank" type="text" name="cheqbank" class="form-control" placeholder="Enter cheque bank">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="cname">Course Name:</label>
<input name="course" id="course" type="text" name="cname" class="form-control" placeholder="Enter Course name">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="tutfees">Tution Fees:</label>
<input name="tfees" id="tfees" type="text" name="tutfees" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="stax">SGST:</label>
<input name="sgst" id="sgst" type="number" name="stax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="ctax">CGST:</label>
<input name="cgst" id="cgst" type="number" name="ctax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="gtfees">Grand Total:</label>
<input name="gtotal" readonly id="gtotal" type="number" name="gtfees" placeholder="Enter total fees" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div><p><strong>Terms and Condition:</strong></p>
<br>
<p style="font-size:small; width:120%;margin-top:-4%;">
1.Any fees once paid shall not be refunded under any circumstances.<br>
2.We do not disclose any personal information of student before or after the announcement of the result.<br>
3.In case the cheque bounces, the student is liable to pay ₹500/- extra and deposit whole amount in cash within next 24-48 hours.<br>
4.In case of delay of installment from the due date, penalty @ ₹250/- per day will be charged from the student.<br>
5.Tution fee inclusive of GST.<br>
6.All disputes are subject to exclusive juridsiction of Delhi Courts only.<br>
7.All cheque are to be drawn in favour of '<strong>Edumentor Educational Services Pvt. Ltd</strong>.'
</p>
</div>
I agree to the above terms and conditions
<br><br><br><br><br>
<div class="row">
<div class="col-md-8">
<label>Parents/Student Signature</label>
</div>
<div style="text-align:right;" class="col-md-4">
<label>Authorised Signatory</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-danger" name="pdf" id="pdf" value="Export To Pdf"/>
<button type="button" class="btn btn-primary" id="btnPrint" name="subPrint">PRINT</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-primary" id="submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
最佳答案
从以下链接下载 printThis.js 并将其包含在您的 html 中:https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js
将要打印的内容用下面的div包裹起来。此 div 之外的所有内容都不会被打印。
<div id="modalDiv">
..content to print..
</div>
调用以下 jquery 打印所有内容，包括不可见的内容。如果您有多个 css 文件，您可以将 css 文件包含在一个数组中。
$("#modalDiv").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});
关于javascript - 在模态中使用打印按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48379921/