Fatal编程技术网
  • javascript/
  • Javascript jQuery，print此打印页面与屏幕上的外观不同

Javascript jQuery，print此打印页面与屏幕上的外观不同

javascript jquery html css

Javascript jQuery，print此打印页面与屏幕上的外观不同,javascript,jquery,html,css,printthis,Javascript,Jquery,Html,Css,Printthis,我有一个对话框，应该是可打印的 所以我使用了这个插件 但是，当我尝试打印此页面时，它与显示的页面看起来不同 对话框中有三个表 如下图所示，表2和表3的单元格高度在“打印预览”中更改。它实际上是这样打印的 以下是我的代码： HTML CSS 哦，上帝。打印和生成pdf文件是一件麻烦事。不久前我做了一件事，动态生成的内容需要华丽，否则就不行了，那就是我开始秃顶的时候了。你得研究一下合适的样式，这些样式可以也应该用于印刷。建议的打印布局。它看起来像一个页面，但使用分页符和好友css属性。我是pri

我有一个对话框，应该是可打印的

所以我使用了这个插件

但是，当我尝试打印此页面时，它与显示的页面看起来不同

对话框中有三个表

如下图所示，表2和表3的单元格高度在“打印预览”中更改。它实际上是这样打印的

以下是我的代码：

HTML

CSS

哦，上帝。打印和生成pdf文件是一件麻烦事。不久前我做了一件事，动态生成的内容需要华丽，否则就不行了，那就是我开始秃顶的时候了。你得研究一下合适的样式，这些样式可以也应该用于印刷。建议的打印布局。它看起来像一个页面，但使用分页符和好友css属性。我是printThis的作者。由于嵌套表以及右侧嵌套表中隐藏的表行，此布局非常复杂。虽然您可能会修复一个浏览器的布局，但我猜这个问题在不同的浏览器中有所不同。您是否尝试过使用
rowspan
，而不是使用隐藏的表行来获得大的空白单元格？这可能会得到更一致的结果。 
<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>

bindEvent : function(){
    $(".btnPrintPay").on('click', function(){
        $("#printArea").printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
        });
    });

.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;}