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 备注 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 真实性 纯度 发芽率 一致性 水分 净度 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 备注 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 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 真实性 894 </td> 895 <td> 896 S1G00880 897 </td> 898 </tr> 899 </tbody> 900 </table> 901 </div> 902 </body> 903 </html>
