jQuery，print这个打印页面看起来与它在屏幕上的样子有所不同
我的对话框应该是可打印的。
所以我使用了printThis插件。
但是，当我尝试打印此页面时，它看起来与显示的内容不同。
对话框中有三个表。
正如您在下面所看到的，表2和表3的单元格高度在打印预览中会发生变化。它实际上是这样打印的。
以下是我的代码：
HTML
<div class="clear bttn" id="divSmallDate">
<div class="bttn rig floatNone">
<button type="button" class="ui-button print_ui btnPrintPay">Print</button>
<button type="button" class="ui-button blank btnClosePay">Close</button>
</div>
</div>
<form id="formUpdateDoc">
<div class="data">
<div id="printArea">
<div style="padding:5px 0 8px 0;">
<p style="color: black; border:0; text-align:center; font-size:32px; font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif"></p>
<input type="hidden" readonly="readonly" id="payTitle" class="test" style="border:0; text-align:center; font-size:32px; font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif">
</div>
<table class="paytbl" style="margin:0 auto;">
<colgroup>
<col style="width: 170px;">
<col style="width: 230px;">
<col style="width: 170px;">
<col style="width: 230px;">
</colgroup>
<tbody>
<tr>
<td class="tbHead">Name</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payEmployee" id="payEmployee" style="border:0; text-align:center;"></td>
<td class="tbHead">Payment Date</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payDisDate" id="payDisDate" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbHead">Working Duration</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payDuration" id="payDuration" style="border:0; text-align:center;"></td>
<td class="tbHead">Currency Rate (R/USD)</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payRate" id="payRate" style="border:0; text-align:center;"></td>
</tr>
</tbody>
</table>
<table class="paytblparent">
<colgroup>
<col style="width: 400px;">
<col style="width: 400px;">
</colgroup>
<tr>
<td>
<table class="paytblhalf" style="margin:20px 0 30px 0;">
<colgroup>
<col style="width: 170px;">
<col style="width: 228px;">
</colgroup>
<tbody>
<tr>
<td class="tbHead">Basic Salary</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payBasicSalary" id="payBasicSalary" style="border:0; text-align:center;"></td>
</tr>
<tr id="trOT" style="display:none;">
<td class="tbHead">OT</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payOT" id="payOT" style="border:0; text-align:center;"></td>
</tr>
<tr id="trSpecial" style="display:none;">
<td class="tbHead">Special Allowance</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="paySpecialAllowance" id="paySpecialAllowance" style="border:0; text-align:center;"></td>
</tr>
<tr id="trAllowance" style="display:none;">
<td class="tbHead">Allowance</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payAllowance" id="payAllowance" style="border:0; text-align:center;"></td>
</tr>
<tr id="trRetroactivity" style="display:none;">
<td class="tbHead">Retroactivity</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payRetroactivity" id="payRetroactivity" style="border:0; text-align:center;"></td>
</tr>
<tr id="trAnnual" style="display:none;">
<td class="tbHead">Annual Leave</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payAnnualLeave" id="payAnnualLeave" style="border:0; text-align:center;"></td>
</tr>
<tr id="trBAdvanced" style="display:none;">
<td class="tbHead">Advanced</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payBAdvanced" id="payBAdvanced" style="border:0; text-align:center;"></td>
</tr>
<tr id="trBReturnAdv" style="display:none;">
<td class="tbHead">Returned Advance</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payBReturnAdv" id="payBReturnAdv" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbHead" rowspan="2">Family Allowance</td>
<td class="tbContent"><p style="display:inline;">Spouse:</p><p style="display:inline;"></p>
<input type="hidden" readonly="readonly" name="paySpouse" id="paySpouse" style="border:0; text-align:center;"></td>
</tr>
<tr id="trFamily">
<td class="tbContent"><p style="display:inline;">Children:</p><p style="display:inline;"></p>
<input type="hidden" readonly="readonly" name="payChildren" id="payChildren" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbHead">Payroll Amount</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payTotal" id="payTotal" style="border:0; text-align:center;"></td>
</tr>
<tr id="trThank">
<td class="tbContent" style="text-align:center;" colspan="2">Thank You!</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="paytblright" style="margin:20px 0 30px 0;">
<colgroup>
<col style="width: 170px;">
<col style="width: 228px;">
</colgroup>
<tbody>
<tr>
<td class="tbHead">Tax on Salary</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payTax" id="payTax" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbHead">Advanced (S.A.)</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payAAdvanced" id="payAAdvanced" style="border:0; text-align:center;"></td>
</tr>
<tr id="zeroZero" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroOne" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroTwo" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroThree" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroFour" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroFive" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroSix" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr id="zeroSeven" style="display:none;">
<td class="tbContent" style="text-align:center;" colspan="2"></td>
</tr>
<tr>
<td class="tbHead">Deductible Amount</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payDeductible" id="payDeductible" style="border:0; text-align:center;"></td>
</tr>
<tr>
<td class="tbHead">Payable Amount</td>
<td class="tbContent"><p></p>
<input type="hidden" readonly="readonly" name="payNet" id="payNet" style="border:0; text-align:center;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
的JavaScript
bindEvent : function(){
$(".btnPrintPay").on('click', function(){
$("#printArea").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});
});
CSS
.paytbl { width: 800px; display: table; background: #FFFFFF; border-collapse: collapse;}
.paytbl td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 36px; border-style: solid; border: 2px solid black;}
.paytbl td.tbHead { background: #E8E8E8; padding: 0 7px 0 7px; height: 36px; border-style: solid; border: 2px solid black;}
.paytbl td.tbContentTwo { background: #FFFFFF; padding: 7px 7px 7px 7px; height: 200px; border-style: solid; border: 2px solid black;}
.paytbl td.tbText { background: #FFFFFF; padding: 0 7px 0 7px; }
.paytbl td.tbBody { background: #FFFFFF; padding: 7px 0 0 7px; height: 200px; vertical-align: text-top; }
.paytblparent { border-collapse: collapse; }
.paytblhalf { width: 400px; display: table; background: #FFFFFF; border-collapse: collapse; float: right}
.paytblhalf td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 36px; border-style: solid; border: 2px solid black;}
.paytblhalf td.tbHead { background: #E8E8E8; padding: 0 7px 0 7px; height: 36px; border-style: solid; border: 2px solid black;}
.paytblhalf td.tbContentTwo { background: #FFFFFF; padding: 7px 7px 7px 7px; height: 200px; border-style: solid; border: 2px solid black;}
.paytblhalf td.tbText { background: #FFFFFF; padding: 0 7px 0 7px; }
.paytblhalf td.tbBody { background: #FFFFFF; padding: 7px 0 0 7px; height: 200px; vertical-align: text-top; }
.paytblhalf tr#trThank td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 36px; border-style: solid;}
.paytblright { width: 400px; display: table; background: #FFFFFF; border-collapse: collapse; float: left}
.paytblright td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 36px; border-style: solid; border: 2px solid black;}
.paytblright td.tbHead { background: #E8E8E8; padding: 0 7px 0 7px; height: 36px; border-style: solid solid solid hidden;}
.paytblright td.tbContentTwo { background: #FFFFFF; padding: 7px 7px 7px 7px; height: 200px; border-style: solid; border: 2px solid black;}
.paytblright td.tbText { background: #FFFFFF; padding: 0 7px 0 7px; }
.paytblright td.tbBody { background: #FFFFFF; padding: 7px 0 0 7px; height: 200px; vertical-align: text-top; }
.paytblright tr#zeroZero td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 36px; border-style: solid solid solid hidden;}
.paytblright tr#zeroOne td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 74px; border-style: solid solid solid hidden;}
.paytblright tr#zeroTwo td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 112px; border-style: solid solid solid hidden;}
.paytblright tr#zeroThree td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 150px; border-style: solid solid solid hidden;}
.paytblright tr#zeroFour td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 188px; border-style: solid solid solid hidden;}
.paytblright tr#zeroFive td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 226px; border-style: solid solid solid hidden;}
.paytblright tr#zeroSix td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 264px; border-style: solid solid solid hidden;}
.paytblright tr#zeroSeven td.tbContent { background: #FFFFFF; padding: 0 7px 0 7px; height: 302px; border-style: solid solid solid hidden;}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？