<html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--media=print 這個屬性可以在打印時有效--> <style media="print"> .Noprint { display: none; } .PageNext { page-break-after: always; } </style> <style> body, td, th { font-size: 12px; } .NOPRINT { font-family: "宋體"; font-size: 12px; } </style> </head> <body> <script type="text/javascript"> function test(){ //當前循環次數 var runCount = 0; //數據行總行數最大值 var maxCount = 1000; //每頁數據行數 var pageCount = 44; //構造第一個表格 $("body:last").append("<table border='1' cellpadding='2' cellspacing='0' ><tr style='height:40px;'><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td></tr></table>"); //構造第一行 var i1 = 900000000000; var i2 = 900000000000 + pageCount; var i3 = 900000000000 + pageCount*2; var i4 = 900000000000 + pageCount*3; $("table:last").append("<tr><td>"+i1+"</td><td></td><td>"+i2+"</td><td></td><td>"+i3+"</td><td> </td><td>"+i4+"</td><td> </td></tr>"); //構造其他行 for(var i = 1; i<999999; i++){ //循環次數 runCount++; //頁索引 var pageIndex = parseInt(runCount/pageCount); //添加頁碼和分頁符 if(i%pageCount==0){ //添加頁碼 $("body:last").append("<div style='text-align:left; padding-left:100px;margin-top:10px;'>第 "+(pageIndex)+" 頁</div>"); //打印分頁 $("body:last").append("<hr align='center' width='100%' size='1' noshade class='NOPRINT'>"); $("body:last").append("<div class='PageNext'></div>"); $("body:last").append("<table border='1' cellpadding='2' cellspacing='0' ><tr style='height:40px;'><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td><td>托盤編號 </td><td><input type='checkbox' /></td></tr></table>"); i=0; } //構造數據行 var s1 = 900000000000 + i + pageIndex*pageCount*4; var s2 = 900000000000 + i + pageCount + pageIndex*pageCount*4; var s3 = 900000000000 + i + pageCount*2 + pageIndex*pageCount*4; var s4 = 900000000000 + i + pageCount*3 + pageIndex*pageCount*4; $("table:last").append("<tr><td>"+s1+"</td><td></td><td>"+s2+"</td><td></td><td>"+s3+"</td><td> </td><td>"+s4+"</td><td> </td></tr>"); //數據行總行數超出則終止 if(runCount > maxCount){ return; } } } test(); </script> </body> </html>
網頁運行效果：
打印網頁時，會自動分頁，如下：
參考資料：https://www.cnblogs.com/cuihongyu3503319/p/4239328.html