html上table的分页打印

<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
//按照行数进行分页
function printTable(ro) {
var row = 18; //默认分页18行,demo中参数是3行
if (ro != undefined) {
row = ro;
}
var $tbl = $('table.printTable');
var $tableparent = $tbl.parent();
var $thead = $tbl.find('thead');
// var $tfoot = $tbl.find('tfoot');
var $tbody = $tbl.find('tbody');
var $tbodyTr = $tbody.children();
var $clonefirstTr = $tbodyTr.first().clone();
$clonefirstTr.children().each(function () {
$(this).html(' ');
})
//打空白行
var tbodyTrlength = $tbodyTr.length;
var addrow = 0;
var remainder = tbodyTrlength % row;
var nulltr = "";
if (remainder != 0) {
addrow = row - remainder;
for (var i = 0; i < addrow; i++) {
nulltr += $clonefirstTr[0].outerHTML;
}
}
$tbody.append(nulltr); //空白行加入到文档
//再一次获取所有的tr行
$tbodyTr = $tbody.children();
//清空tbody
$tbody.children().remove();
//再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?)
$tbl = $('table.printTable');
//创建一个文档碎片(这里没有用文档碎片了,jQuery操作字符串更简单)
var fragment = '';
//给表格加18行tr(主体内容)
tbodyTrlength = $tbodyTr.length;
var trFG = '';
for (var i = 0; i < tbodyTrlength; i++) {
trFG += $tbodyTr.eq(i)[0].outerHTML;
if ((i + 1) % row == 0) {
var clonetbl = $tbl.clone(); //克隆一个表格
clonetbl.find("tbody").append(trFG); //在表格的body中加入内容
fragment += clonetbl[0].outerHTML + "<div style='page-break-after:always;' ><br/></div>"; //把表格加入文档碎片中
trFG = '';
}
}
$tbl.before(fragment);
$tbl.remove();

preview(1);
}

//进行预览打印
function preview(oper) {
if (oper < 10) {
bdhtml = window.document.body.innerHTML; //获取当前页的html代码
sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
} else {
window.print();
}
}
</script>
<style>
table tr
{
height: 50px;
}
table tr th
{
font-size: 14px;
}
</style>
<h2><input title="打印1" onclick="preview(1)" type="button" name="button_export" value="打印1" /> <!--startprint1--></h2>
<table style="min-width: 900px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr align="center"><th style="font-size: 18px;" colspan="8"> </th></tr>
<tr align="center"><th style="font-size: 16px;" colspan="8"> </th></tr>
<tr><th> </th><th colspan="7" align="left">
@for (int a = 1; a <= 3; a++)
 { <input type="checkbox" value="@a" checked="checked" />@a }
</th></tr>
</tbody>
</table>
<div style="page-break-after: always;"> </div>
<h2>@*强制分页*@ <input onclick="printTable(10)" type="button" value="打印table分页" /></h2>
<p>@for (int i = 1; i <= 30; i++) {}</p>
<table class="printTable" style="min-width: 900px; empty-cells: show;" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr><th> </th><th> </th><th> </th></tr>
</thead>
<tbody>

@for (int i = 1; i <= 30; i++){
<tr>
<td></td>
<td> </td>
<td> </td>
</tr>
} </tbody> </table> <!--endprint1-->

  

posted @ 2018-08-16 09:19  天空之云  阅读(4454)  评论(0编辑  收藏  举报