window.print()方法設置分頁

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">     
<style media=print>   //主要分頁作用
.PageNext{page-break-after: always;}   
</style>   
 
<style>
.pd_20 {
    padding: 20px 15px 5px 20px!important;
}

.lh_36 {
    line-height: 36px !important;
}

.tr {
    text-align: right !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt60 {
    margin-top: 30px !important;
}

.dib {
    display: inline-block !important;
}

.bb {
    border-bottom: 1px solid #333 !important;
}

.ve_t {
    vertical-align: top;
}

.t_indent {
    text-indent: 20px !important;
}

.declare_table {
    width: 710px;
    margin: 0 auto;
    font-size: 14px;
    color: #333;
}

.declare_table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-all;
    border: none;
}

.declare_table .input input {
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-indent: 15px;
    color: #333;
    border: none;
}

.declare_table .input input:focus {
    outline: none;
}

.declare_table table .w_auto {
    width: auto;
    font-size: 14px;
    font-family:"宋體"
}

.declare_table .textarea textarea {
    width: 100%;
    font-size: 14px;
    font-family:"宋體";
    text-indent: 5px;
    color: #333;
    padding: 0;
    border: none;
    resize: none;
}

.declare_table .textarea textarea:focus {
    outline: none;
}

.declare_table table thead tr {
    height: 40px;
}

.declare_table table tbody tr {
    text-align: left;
    height: 34px;
    border: 1px solid #333;
}

.declare_table table tbody tr td {
    padding: 2px 5px;
    border: 1px solid #333;
}

.declare_table .table_note {
    margin-top: 10px;
}

.declare_table .table_note p {
    margin: 0px;
}

.declare_table .checkbox_item {
    margin-top: 10px;
}

body{
    font-family:"宋體"
}

</style>  
 
</head>   
 
<body >   
    <div class="declare_table"> 
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0">   
            <thead>
                <tr style="width:100%">
                    <th colspan="4" class="input" style="text-align:center; font-size:30px;margin-top:10px;">
                        <div>計劃書</div>
                        <div style="margin-left: 460px; font-size:16px;margin-top:10px;margin-bottom: 5px">日期:<span >2019年5月</span></div>
                    </th>
                </tr>
            </thead>
                
            <tbody style="font-size: 14px">
                <tr >

                    <td style="margin-left: 30px">姓名:</td>
                    <td class="input" ><span   style="font-size: 12px;font-family:'宋體'">天飛俠</span>
                    </td>
                  <td style="margin-left: 30px">年齡:</td>
                    <td class="input" ><span   style="font-size: 12px;font-family:'宋體'">20</span>
                    </td>
                </tr>
                <tr>
                    <td style="margin-left: 30px">出生日期:</td>
                   <td class="input" ><span   style="font-size: 12px;font-family:'宋體'">2035年1月1日</span>
                    </td>
                    <td style="margin-left: 30px">性別:</td>
                   <td class="input" ><span   style="font-size: 12px;font-family:'宋體'">男</span>
                    </td>
                </tr>

            
                <tr style="padding-top: 5px">
             <td colspan="2" >
                        <div>自己審批意見:</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea rows="6" id="audit10-content" style="text-align: center;"></textarea>
                        </div>
                        <div class="input" >
                            簽名及日期:<input type="text" class="w_auto" id="audit10" style="margin-top: -10px;width:250px">
                        </div>
                    </td>
                    <td colspan="2">
                        <div>領導甲意見:</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea  rows="6"  id="audit11-content" style="text-align: center;"></textarea>
                        </div>
                        <div class="input">
                            簽名及日期:<input type="text" class="w_auto" id="audit11" style="margin-top: -10px;width:250px">
                        </div>
                    </td>  
                </tr>
                <tr>

                             

                    <td colspan="2">
                        <div>學校意見(蓋章):</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea rows="6" id="audit4-content" style="text-align: center;" ></textarea>
                        </div>
                        <div class="input" >
                            簽名及日期:<input type="text" class="w_auto" id="audit4" style="margin-top: -10px;width:250px">
                        </div>
                    </td>
                    <td colspan="2">
                        <div>學院意見:</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea  rows="6"  id="audit5-content" style="text-align: center;"></textarea>
                        </div>
                        <div class="input">
                            簽名及日期:<input type="text" class="w_auto" id="audit5" style="margin-top: -10px;width:250px">
                        </div>
                    </td>
                </tr> 
        </tbody>   
</table>   

  <!--開始分頁--><hr align="center" width="90%" size="1" noshade  >   
<div class="PageNext"></div>   
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" > 
    <tbody style="font-size: 14px">
                <tr>
                    <td colspan="4">
                        <div>省發改委意見:</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea rows="6" id="audit8-content"></textarea>
                        </div>
                        <div class="input tr" style="margin-bottom: 10px">
                            簽名及日期:<input type="text" class="w_auto" id="audit8" style="margin-top: -10px;width:250px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div>國家發改委意見:</div>
                        <div class="textarea" style="margin-top: 10px">
                            <textarea rows="6" id="audit9-content"></textarea>
                        </div>
                        <div class="input tr" style="margin-bottom: 10px">
                            簽名及日期:<input type="text" class="w_auto" id="audit9" style="margin-top: -10px;width:250px">
                        </div>
                    </td>
                </tr>
            </tbody>  
</table>  
        <div class="table_note">
            <p>注:本表雙面印製,一式叄份,屬於個人機密。</p>
        </div>   

    </div>
</body> 

<script type="text/javascript">

//設置自動彈出打印框
window.print();

//檢驗IE瀏覽器

if (!!window.ActiveXObject || "ActiveXObject" in window){setTimeout(shotBoy,50000) }else{    shotBoy()}             
function shotBoy(){
    window.addEventListener('afterprint',function() {
      window.close();
    })
}  

</script>  
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章