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

 

转载于:https://www.cnblogs.com/linJie1930906722/p/5217377.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值