zoukankan      html  css  js  c++  java
  • jQuery自动分页打印表格(HTMLtable),可以强制换页

    最近做项目的时候需要做批量打印订单,一个订单可能在最后一页是的内容是不足一页的,这时候下一个订单需要下一页打印,这样就需要强制换页。在下一页再打印下一个订单

    部分代码:

    部分重要的css是分页的换页的关键:

     1     <style type="text/css">
     2         @media print
     3         {
     4             .pageBreak
     5             {
     6                 page-break-after: always;
     7             }
     8             .noPrint
     9             {
    10                 display: none;
    11             }
    12         }
    13     </style>

    部分重要的js:

    1 <script type="text/javascript">
    2         (function () {
    3             window.print();  //调起打印窗口(打开打印窗口)
    4         })();
    5  </script>

    部分HTML代码:

    1 <div class="pageBreak"><!--如果需要强制换页就在上一页的未尾出加上此代码-->
    2 </div>

    完整代码:

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4     <title></title>
      5     <script type="text/javascript">
      6         (function () {
      7             window.print();
      8         })();
      9     </script>
     10     <style type="text/css">
     11         *
     12         {
     13             margin: 0;
     14             padding: 0;
     15         }
     16         body
     17         {
     18             font-family: Verdana, Geneva, sans-serif;
     19             font-size: 12px;
     20             width: 210mm;
     21             text-align: center;
     22         }
     23         
     24         a
     25         {
     26             text-decoration: none;
     27         }
     28         
     29         .bold
     30         {
     31             font-weight: bold;
     32         }
     33         
     34         ul, li
     35         {
     36             list-style: none;
     37         }
     38         
     39         img
     40         {
     41             border: none;
     42         }
     43         
     44         #print-content
     45         {
     46             width: 98%;
     47             margin: 10px auto;
     48         }
     49         
     50         #print-content h1
     51         {
     52             font-size: 24px;
     53             text-align: center;
     54         }
     55         
     56         .floatLeft
     57         {
     58             float: left;
     59         }
     60         .floatLeft50
     61         {
     62             float: left;
     63             margin-left: 50px;
     64         }
     65         .floatRight
     66         {
     67             float: right;
     68         }
     69         
     70         .headInfo
     71         {
     72             margin: 5px auto;
     73             height: 16px;
     74         }
     75         
     76         table
     77         {
     78             border-collapse: collapse;
     79             width: 100%;
     80             border: 1px solid #000;
     81         }
     82         
     83         .tableTopBorder_3
     84         {
     85             border-top: 0px solid #000;
     86         }
     87         
     88         td, th
     89         {
     90             border: 1px solid #000;
     91             text-align: center;
     92             padding: 3px 5px;
     93         }
     94         
     95         .signatureArea
     96         {
     97             height: 25px;
     98             line-height: 25px;
     99         }
    100         .signatureArea .firstSpan
    101         {
    102             margin-right: 200px;
    103         }
    104         #print-content .header .titleArea
    105         {
    106             height: 50px;
    107             position: relative;
    108         }
    109         #print-content .header h1
    110         {
    111             padding-top: 10px;
    112         }
    113         .printTm
    114         {
    115             position: absolute;
    116             left: 0px;
    117             top: 0px;
    118         }
    119         .contractTable td
    120         {
    121             text-align: left;
    122         }
    123         .contractTable th
    124         {
    125             font-weight: bold;
    126         }
    127         .printInput
    128         {
    129             width: 99%;
    130             border: none;
    131             background: none;
    132         }
    133         .font24
    134         {
    135             font-size: 24px;
    136         }
    137         .font20
    138         {
    139             font-size: 20px;
    140         }
    141         .width200
    142         {
    143             width: 200px;
    144         }
    145         .width180
    146         {
    147             width: 180px;
    148         }
    149         .btn
    150         {
    151             cursor: pointer;
    152             padding: 2px 10px;
    153             margin: 0px 10px;
    154         }
    155         @media print
    156         {
    157             .pageBreak
    158             {
    159                 page-break-after: always; /*强制换页的关键*/
    160             }
    161             .noPrint
    162             {
    163                 display: none;
    164             }
    165         }
    166     </style>
    167 </head>
    168 <body>
    169     <div id="print-content">
    170         <div class="header clear">
    171             <div class="titleArea">
    172                 <h1>
    173                     订单表头</h1>
    174             </div>
    175         </div>
    176         <table class="tableTopBorder_3">
    177             <thead>
    178                 <tr>
    179                     <th>
    180                         序号
    181                     </th>
    182                     <th>
    183                         条码号
    184                     </th>
    185                     <th>
    186                         原编号
    187                     </th>
    188                     <th>
    189                         名称
    190                     </th>
    191                     <th>
    192                         样品来源
    193                     </th>
    194                     <th>
    195                         送样量(g)
    196                     </th>
    197                     <th>
    198                         类型
    199                     </th>
    200                     <th>
    201                         种类
    202                     </th>
    203                     <th>
    204                         检验类型
    205                     </th>
    206                     <th>
    207                         &nbsp;&nbsp;备注&nbsp;&nbsp;
    208                     </th>
    209                 </tr>
    210             </thead>
    211             <tbody>
    212                 <tr>
    213                     <td>
    214                         1
    215                     </td>
    216                     <td>
    217                         BGG1000
    218                     </td>
    219                     <td>
    220                         BGG1000
    221                     </td>
    222                     <td>
    223                         吉单34
    224                     </td>
    225                     <td>
    226                         农业部征集
    227                     </td>
    228                     <td>
    229                         500
    230                     </td>
    231                     <td>
    232                         种子
    233                     </td>
    234                     <td>
    235                         自交系
    236                     </td>
    237                     <td width="95px">
    238                         真实性&nbsp;&nbsp; 纯度&nbsp;&nbsp; 发芽率&nbsp;&nbsp; 一致性&nbsp;&nbsp; 水分&nbsp;&nbsp; 净度&nbsp;&nbsp;
    239                     </td>
    240                     <td>
    241                         S1G00861
    242                     </td>
    243                 </tr>
    244                 <tr>
    245                     <td>
    246                         2
    247                     </td>
    248                     <td>
    249                         BGG1001
    250                     </td>
    251                     <td>
    252                         BGG1001
    253                     </td>
    254                     <td>
    255                         吉单38
    256                     </td>
    257                     <td>
    258                         农业部征集
    259                     </td>
    260                     <td>
    261                         1000
    262                     </td>
    263                     <td>
    264                         果穗
    265                     </td>
    266                     <td>
    267                         杂交种
    268                     </td>
    269                     <td width="95px">
    270                         真实性&nbsp;&nbsp;
    271                     </td>
    272                     <td>
    273                         S1G00862
    274                     </td>
    275                 </tr>
    276                 <tr>
    277                     <td>
    278                         3
    279                     </td>
    280                     <td>
    281                         BGG1002
    282                     </td>
    283                     <td>
    284                         BGG1002
    285                     </td>
    286                     <td>
    287                         吉玉106
    288                     </td>
    289                     <td>
    290                         农业部征集
    291                     </td>
    292                     <td>
    293                         1001
    294                     </td>
    295                     <td>
    296                         果穗
    297                     </td>
    298                     <td>
    299                         杂交种
    300                     </td>
    301                     <td width="95px">
    302                         真实性&nbsp;&nbsp;
    303                     </td>
    304                     <td>
    305                         S1G00863
    306                     </td>
    307                 </tr>
    308                 <tr>
    309                     <td>
    310                         4
    311                     </td>
    312                     <td>
    313                         BGG1003
    314                     </td>
    315                     <td>
    316                         BGG1003
    317                     </td>
    318                     <td>
    319                         春育8号
    320                     </td>
    321                     <td>
    322                         农业部征集
    323                     </td>
    324                     <td>
    325                         1002
    326                     </td>
    327                     <td>
    328                         果穗
    329                     </td>
    330                     <td>
    331                         杂交种
    332                     </td>
    333                     <td width="95px">
    334                         真实性&nbsp;&nbsp;
    335                     </td>
    336                     <td>
    337                         S1G00864
    338                     </td>
    339                 </tr>
    340                 <tr>
    341                     <td>
    342                         5
    343                     </td>
    344                     <td>
    345                         BGG1004
    346                     </td>
    347                     <td>
    348                         BGG1004
    349                     </td>
    350                     <td>
    351                         吉单88
    352                     </td>
    353                     <td>
    354                         农业部征集
    355                     </td>
    356                     <td>
    357                         1003
    358                     </td>
    359                     <td>
    360                         果穗
    361                     </td>
    362                     <td>
    363                         杂交种
    364                     </td>
    365                     <td width="95px">
    366                         真实性&nbsp;&nbsp;
    367                     </td>
    368                     <td>
    369                         S1G00865
    370                     </td>
    371                 </tr>
    372                 <tr>
    373                     <td>
    374                         6
    375                     </td>
    376                     <td>
    377                         BGG1005
    378                     </td>
    379                     <td>
    380                         BGG1005
    381                     </td>
    382                     <td>
    383                         龙丰7号
    384                     </td>
    385                     <td>
    386                         农业部征集
    387                     </td>
    388                     <td>
    389                         1004
    390                     </td>
    391                     <td>
    392                         果穗
    393                     </td>
    394                     <td>
    395                         杂交种
    396                     </td>
    397                     <td width="95px">
    398                         真实性&nbsp;&nbsp;
    399                     </td>
    400                     <td>
    401                         S1G00866
    402                     </td>
    403                 </tr>
    404                 <tr>
    405                     <td>
    406                         7
    407                     </td>
    408                     <td>
    409                         BGG1006
    410                     </td>
    411                     <td>
    412                         BGG1006
    413                     </td>
    414                     <td>
    415                         远东1号
    416                     </td>
    417                     <td>
    418                         农业部征集
    419                     </td>
    420                     <td>
    421                         1005
    422                     </td>
    423                     <td>
    424                         果穗
    425                     </td>
    426                     <td>
    427                         杂交种
    428                     </td>
    429                     <td width="95px">
    430                         真实性&nbsp;&nbsp;
    431                     </td>
    432                     <td>
    433                         S1G00867
    434                     </td>
    435                 </tr>
    436                 <tr>
    437                     <td>
    438                         8
    439                     </td>
    440                     <td>
    441                         BGG1007
    442                     </td>
    443                     <td>
    444                         BGG1007
    445                     </td>
    446                     <td>
    447                         绿育9911
    448                     </td>
    449                     <td>
    450                         农业部征集
    451                     </td>
    452                     <td>
    453                         1006
    454                     </td>
    455                     <td>
    456                         果穗
    457                     </td>
    458                     <td>
    459                         杂交种
    460                     </td>
    461                     <td width="95px">
    462                         真实性&nbsp;&nbsp;
    463                     </td>
    464                     <td>
    465                         S1G00868
    466                     </td>
    467                 </tr>
    468                 <tr>
    469                     <td>
    470                         9
    471                     </td>
    472                     <td>
    473                         BGG1008
    474                     </td>
    475                     <td>
    476                         BGG1008
    477                     </td>
    478                     <td>
    479                         九单64
    480                     </td>
    481                     <td>
    482                         农业部征集
    483                     </td>
    484                     <td>
    485                         1007
    486                     </td>
    487                     <td>
    488                         果穗
    489                     </td>
    490                     <td>
    491                         杂交种
    492                     </td>
    493                     <td width="95px">
    494                         真实性&nbsp;&nbsp;
    495                     </td>
    496                     <td>
    497                         S1G00869
    498                     </td>
    499                 </tr>
    500                 <tr>
    501                     <td>
    502                         10
    503                     </td>
    504                     <td>
    505                         BGG1009
    506                     </td>
    507                     <td>
    508                         BGG1009
    509                     </td>
    510                     <td>
    511                         四育7号
    512                     </td>
    513                     <td>
    514                         农业部征集
    515                     </td>
    516                     <td>
    517                         1008
    518                     </td>
    519                     <td>
    520                         果穗
    521                     </td>
    522                     <td>
    523                         杂交种
    524                     </td>
    525                     <td width="95px">
    526                         真实性&nbsp;&nbsp;
    527                     </td>
    528                     <td>
    529                         S1G00870
    530                     </td>
    531                 </tr>
    532             </tbody>
    533         </table>
    534         <div class="pageBreak">
    535             <!--如果需要强制换页就在上一页的未尾出加上此代码-->
    536         </div>
    537         <div class="header clear">
    538             <div class="titleArea">
    539                 <h2>
    540                     订单表头</h2>
    541             </div>
    542         </div>
    543         <table class="tableTopBorder_3">
    544             <thead>
    545                 <tr>
    546                     <th>
    547                         序号
    548                     </th>
    549                     <th>
    550                         条码号
    551                     </th>
    552                     <th>
    553                         原编号
    554                     </th>
    555                     <th>
    556                         名称
    557                     </th>
    558                     <th>
    559                         样品来源
    560                     </th>
    561                     <th>
    562                         送样量(g)
    563                     </th>
    564                     <th>
    565                         类型
    566                     </th>
    567                     <th>
    568                         种类
    569                     </th>
    570                     <th>
    571                         检验类型
    572                     </th>
    573                     <th>
    574                         &nbsp;&nbsp;备注&nbsp;&nbsp;
    575                     </th>
    576                 </tr>
    577             </thead>
    578             <tbody>
    579                 <tr>
    580                     <td>
    581                         11
    582                     </td>
    583                     <td>
    584                         BGG1010
    585                     </td>
    586                     <td>
    587                         BGG1010
    588                     </td>
    589                     <td>
    590                         四育8号
    591                     </td>
    592                     <td>
    593                         农业部征集
    594                     </td>
    595                     <td>
    596                         1009
    597                     </td>
    598                     <td>
    599                         果穗
    600                     </td>
    601                     <td>
    602                         杂交种
    603                     </td>
    604                     <td width="95px">
    605                         真实性&nbsp;&nbsp;
    606                     </td>
    607                     <td>
    608                         S1G00871
    609                     </td>
    610                 </tr>
    611                 <tr>
    612                     <td>
    613                         12
    614                     </td>
    615                     <td>
    616                         BGG1011
    617                     </td>
    618                     <td>
    619                         BGG1011
    620                     </td>
    621                     <td>
    622                         四育9号
    623                     </td>
    624                     <td>
    625                         农业部征集
    626                     </td>
    627                     <td>
    628                         1010
    629                     </td>
    630                     <td>
    631                         果穗
    632                     </td>
    633                     <td>
    634                         杂交种
    635                     </td>
    636                     <td width="95px">
    637                         真实性&nbsp;&nbsp;
    638                     </td>
    639                     <td>
    640                         S1G00872
    641                     </td>
    642                 </tr>
    643                 <tr>
    644                     <td>
    645                         13
    646                     </td>
    647                     <td>
    648                         BGG1012
    649                     </td>
    650                     <td>
    651                         BGG1012
    652                     </td>
    653                     <td>
    654                         四育10号
    655                     </td>
    656                     <td>
    657                         农业部征集
    658                     </td>
    659                     <td>
    660                         1011
    661                     </td>
    662                     <td>
    663                         果穗
    664                     </td>
    665                     <td>
    666                         杂交种
    667                     </td>
    668                     <td width="95px">
    669                         真实性&nbsp;&nbsp;
    670                     </td>
    671                     <td>
    672                         S1G00873
    673                     </td>
    674                 </tr>
    675                 <tr>
    676                     <td>
    677                         14
    678                     </td>
    679                     <td>
    680                         BGG1013
    681                     </td>
    682                     <td>
    683                         BGG1013
    684                     </td>
    685                     <td>
    686                         四育11号
    687                     </td>
    688                     <td>
    689                         农业部征集
    690                     </td>
    691                     <td>
    692                         1012
    693                     </td>
    694                     <td>
    695                         果穗
    696                     </td>
    697                     <td>
    698                         杂交种
    699                     </td>
    700                     <td width="95px">
    701                         真实性&nbsp;&nbsp;
    702                     </td>
    703                     <td>
    704                         S1G00874
    705                     </td>
    706                 </tr>
    707                 <tr>
    708                     <td>
    709                         15
    710                     </td>
    711                     <td>
    712                         BGG1014
    713                     </td>
    714                     <td>
    715                         BGG1014
    716                     </td>
    717                     <td>
    718                         四育12号
    719                     </td>
    720                     <td>
    721                         农业部征集
    722                     </td>
    723                     <td>
    724                         1013
    725                     </td>
    726                     <td>
    727                         果穗
    728                     </td>
    729                     <td>
    730                         杂交种
    731                     </td>
    732                     <td width="95px">
    733                         真实性&nbsp;&nbsp;
    734                     </td>
    735                     <td>
    736                         S1G00875
    737                     </td>
    738                 </tr>
    739                 <tr>
    740                     <td>
    741                         16
    742                     </td>
    743                     <td>
    744                         BGG1015
    745                     </td>
    746                     <td>
    747                         BGG1015
    748                     </td>
    749                     <td>
    750                         四育13号
    751                     </td>
    752                     <td>
    753                         农业部征集
    754                     </td>
    755                     <td>
    756                         1014
    757                     </td>
    758                     <td>
    759                         果穗
    760                     </td>
    761                     <td>
    762                         杂交种
    763                     </td>
    764                     <td width="95px">
    765                         真实性&nbsp;&nbsp;
    766                     </td>
    767                     <td>
    768                         S1G00876
    769                     </td>
    770                 </tr>
    771                 <tr>
    772                     <td>
    773                         17
    774                     </td>
    775                     <td>
    776                         BGG1016
    777                     </td>
    778                     <td>
    779                         BGG1016
    780                     </td>
    781                     <td>
    782                         四育14号
    783                     </td>
    784                     <td>
    785                         农业部征集
    786                     </td>
    787                     <td>
    788                         1015
    789                     </td>
    790                     <td>
    791                         果穗
    792                     </td>
    793                     <td>
    794                         杂交种
    795                     </td>
    796                     <td width="95px">
    797                         真实性&nbsp;&nbsp;
    798                     </td>
    799                     <td>
    800                         S1G00877
    801                     </td>
    802                 </tr>
    803                 <tr>
    804                     <td>
    805                         18
    806                     </td>
    807                     <td>
    808                         BGG1017
    809                     </td>
    810                     <td>
    811                         BGG1017
    812                     </td>
    813                     <td>
    814                         四育15号
    815                     </td>
    816                     <td>
    817                         农业部征集
    818                     </td>
    819                     <td>
    820                         1016
    821                     </td>
    822                     <td>
    823                         果穗
    824                     </td>
    825                     <td>
    826                         杂交种
    827                     </td>
    828                     <td width="95px">
    829                         真实性&nbsp;&nbsp;
    830                     </td>
    831                     <td>
    832                         S1G00878
    833                     </td>
    834                 </tr>
    835                 <tr>
    836                     <td>
    837                         19
    838                     </td>
    839                     <td>
    840                         BGG1018
    841                     </td>
    842                     <td>
    843                         BGG1018
    844                     </td>
    845                     <td>
    846                         四育16号
    847                     </td>
    848                     <td>
    849                         农业部征集
    850                     </td>
    851                     <td>
    852                         1017
    853                     </td>
    854                     <td>
    855                         果穗
    856                     </td>
    857                     <td>
    858                         杂交种
    859                     </td>
    860                     <td width="95px">
    861                         真实性&nbsp;&nbsp;
    862                     </td>
    863                     <td>
    864                         S1G00879
    865                     </td>
    866                 </tr>
    867                 <tr>
    868                     <td>
    869                         20
    870                     </td>
    871                     <td>
    872                         BGG1019
    873                     </td>
    874                     <td>
    875                         BGG1019
    876                     </td>
    877                     <td>
    878                         四育17号
    879                     </td>
    880                     <td>
    881                         农业部征集
    882                     </td>
    883                     <td>
    884                         1018
    885                     </td>
    886                     <td>
    887                         果穗
    888                     </td>
    889                     <td>
    890                         杂交种
    891                     </td>
    892                     <td width="95px">
    893                         真实性&nbsp;&nbsp;
    894                     </td>
    895                     <td>
    896                         S1G00880
    897                     </td>
    898                 </tr>
    899             </tbody>
    900         </table>
    901     </div>
    902 </body>
    903 </html>
    View Code
  • 相关阅读:
    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
    JS中关于clientWidth offsetWidth scrollWidth 等的含义
    关于javascript中dataset的问题小结
    AMD CMD ,requirejs seajs 区别
    [if IE ]>与<![endif]
    windows下实现wamp与tomcat环境整合
    webstorm 设置jsp支持
    js获取客户端IP及地理位置
    AngularJS所有版本下载地址
    jQuery插件开发全解析
  • 原文地址:https://www.cnblogs.com/linJie1930906722/p/5217377.html
Copyright © 2011-2022 走看看