jquery动态处理两个table行数，达到手动换页的列印效果

最新推荐文章于 2021-06-29 19:10:12 发布

我爱大小王

最新推荐文章于 2021-06-29 19:10:12 发布

阅读量165

点赞数

文章标签： jquery css html php

本文链接：https://blog.csdn.net/u013707196/article/details/106649283

版权

本文介绍如何通过jQuery实现手动换页的列印效果，尤其适用于项目数量多、无法一次性打印完成的情况。主要涉及HTML结构设计和Jquery代码编写，以实现分页打印订货单。

摘要由CSDN通过智能技术生成

效果图如上图片所示。

在列印预览订货单时，有时候项目很多，一页打印不完整。可以做个自定义列印效果。

1、Html代码如下：

<table width="740" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td valign="bottom">     
         <table width="100%" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #000000;">       
            <tr>           
               <td width="10%"><img border="0" src="test.png"></td>          
               <td width="63%" align="center" valign="bottom">
                        <span class="font02">订货单</span><br>
                        <span class="font06">Order Form</span>
               </td>            
               <td width="27%" align="right" valign="bottom">                  
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td align="left">
                           <span class="font06">合同编号</span><br>
                           <span class="font06">Contract No.</span></td>
                        <td style="font-weight:bold" valign="bottom">10888688</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td style="font-weight: bold;height: 35px;vertical-align: bottom;">项目及费用/Items and Fees</td>
   </tr>
   <tr>
      <td width="100%">
         <table width="100%" cellspacing="0" cellpadding="4" id="itemTab">
            <