table的分页打印
在工作中,經常有打印報表的需求,一般<tbody>中的<tr>比較多的時候,打印機打印的時候肯定會出去分頁,有的客戶要求比較高,一張A4紙一定要帶上表頭和表尾的內容(就是<thead>和<tfoot>中的內容),當然可以控制分頁打印樣式,把表頭和表尾都加上樣式,但是實際效果是不是太好,會比較難看,tfoot中的內容和tbody中的內容銜接不上.
后臺程序是可以控制輸出多少行tr后加上tfoot和thead,但是,頁面顯示的時候,一個頁面會顯示多個表頭和表尾,效果不夠完美,而且后臺控制編程是面向過程的.
所有做了一個前臺在用戶點擊打印按鈕時,調用函數,把整個表格拆分成多個表格(一個表格打印在一張A4紙上).
從新整理下需求:
1)一個html中的一個table ,打印到A4紙上
2)每張紙上都要有表格的表頭和表尾,內容部分的行數固定
3)最后一頁,內容部分的輸出行數不夠了,輸出空白行.
(補充下,打印的頁邊距是通過ScriptX控制的,這里就不細說了)
原理就是:
0)指定要輸出的行數(每頁紙要輸出的tr,這里的tr僅屬于tbody)
1)獲取html中的整個表格.
2)獲取tbody中tr的數量,根據指定的行數,判斷是否要在末頁輸出空白行,
3)抽取出tbody中的所有tr,緩存在變量中,清空頁面中tbody中的tr
4)獲取此刻的表格,
5)克隆表格,循環添加指定行數的tr到克隆的表格中,克隆表格后面跟一個<div>加上強制分頁樣式,都緩存在變量中,
6)將變量插入文檔,刪除原有表格
思路就這樣,接下看代碼吧,函數是封裝好的,可以直接調用,要使用的話,<table>要加一個class代碼中的class是.printTable.
這個是一個比較簡單的,實際工作中,可以能會有表格的嵌套使用,還要復雜很多,項目中我已經可以實現了,但還沒封裝好,有空在發布,現在就這個簡單的先發上來在說了;
本人新手入行剛3個月多幾天,說的對的地方,我改!各位大大大請輕噴,謝了
?
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery-1.6.1.min.js"></script> 7 8 9 <script> 10 function printTable (ro){ 11 var row=18; //默認分頁18行,demo中參數是3行 12 if(ro != undefined){ 13 row=ro; 14 } 15 var $tbl = $('table.printTable'); 16 var $tableparent=$tbl.parent(); 17 var $thead = $tbl.find('thead'); 18 // var $tfoot = $tbl.find('tfoot'); 19 var $tbody = $tbl.find('tbody'); 20 var $tbodyTr = $tbody.children(); 21 var $clonefirstTr= $tbodyTr.first().clone(); 22 $clonefirstTr.children().each(function(){ 23 $(this).html(' '); 24 }) 25 //打空白行 26 var tbodyTrlength = $tbodyTr.length; 27 var addrow = 0; 28 var remainder =tbodyTrlength%row; 29 var nulltr=""; 30 if( remainder!=0){ 31 addrow = row- remainder; 32 for(var i = 0;i<addrow;i++){ 33 nulltr+=$clonefirstTr[0].outerHTML; 34 } 35 } 36 $tbody.append(nulltr); //空白行加入到文檔 37 //再一次獲取所有的tr行 38 $tbodyTr=$tbody.children(); 39 //清空tbody 40 $tbody.children().remove(); 41 //再獲取整個表格(此時的表格tbody已經沒東西了,這樣解釋是不是有點啰嗦了?) 42 $tbl = $('table.printTable'); 43 //創建一個文檔碎片(這里沒有用文檔碎片了,jQuery操作字符串更簡單) 44 var fragment=''; 45 //給表格加18行tr(主體內容) 46 tbodyTrlength = $tbodyTr.length; 47 var trFG= ''; 48 for(var i =0 ; i<tbodyTrlength; i++){ 49 trFG+=$tbodyTr.eq(i)[0].outerHTML; 50 if((i+1)%row==0){ 51 var clonetbl = $tbl.clone(); //克隆一個表格 52 clonetbl.find("tbody").append(trFG);//在表格的body中加入內容 53 fragment+=clonetbl[0].outerHTML+"<div style='page-break-after:always;' ><br/></div>"; //把表格加入文檔碎片中 54 trFG=''; 55 } 56 } 57 $tbl.before(fragment); 58 $tbl.remove(); 59 } 60 61 </script> 62 </head> 63 <body> 64 <button onclick="printTable(3)">調用函數按鈕</button> 65 66 <table class="printTable" border="1"> 67 <thead> 68 <tr> 69 <td>頭</td> 70 <td>頭</td> 71 </tr> 72 </thead> 73 74 <tbody> 75 <tr> 76 <td>body</td> 77 <td>body</td> 78 </tr> <tr> 79 <td>body</td> 80 <td>body</td> 81 </tr> <tr> 82 <td>body</td> 83 <td>body</td> 84 </tr> <tr> 85 <td>body</td> 86 <td>body</td> 87 </tr> <tr> 88 <td>body</td> 89 <td>body</td> 90 </tr> <tr> 91 <td>body</td> 92 <td>body</td> 93 </tr> <tr> 94 <td>body</td> 95 <td>body</td> 96 </tr> <tr> 97 <td>body</td> 98 <td>body</td> 99 </tr> <tr> 100 <td>body</td> 101 <td>body</td> 102 </tr> <tr> 103 <td>body</td> 104 <td>body</td> 105 </tr> <tr> 106 <td>body</td> 107 <td>body</td> 108 </tr> <tr> 109 <td>body</td> 110 <td>body</td> 111 </tr> <tr> 112 <td>body</td> 113 <td>body</td> 114 </tr> <tr> 115 <td>body</td> 116 <td>body</td> 117 </tr> 118 </tbody> 119 120 <tfoot> 121 <tr> 122 <td>tfoot</td> 123 <td>tfoot</td> 124 </tr> 125 </tfoot> 126 </table> 127 128 </body> 129 </html>?
轉載于:https://www.cnblogs.com/tenie/p/4851772.html
總結
以上是生活随笔為你收集整理的table的分页打印的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux程序包管理
- 下一篇： 图像纹理合成及纹理传输算法学习（附源码）