最近打印单据，遇到表头不变，Table主体每行高度不固定，打印时 Table自动分页。
网上查了一下 好像都是根据行数来分页的，但是那些行高都是固定的。
查了一些资料，自己整理了一下思路，没分页之前，整个区域分成三个部分，标题，正文，和页脚。在后台 先把这个HTML生产好， 标题和页脚固定不变，主要是对正文进行分页。
正文部分，计算每行高度，判断是否超出一页的高度，超出换页。
下面贴出自己写的HTML页面和js部分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../../themes/bootstrap/easyui.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/ico" href="../../images/favicon.ico" />
<link href="../../themes/bootstrap/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../themes/icon.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.bor {
border-color: Black;
border-style: dotted;
border-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
margin: 0;
padding: 0;
font-size: 16px;
border-spacing: 1px;
border-collapse: separate;
width: 100%;
margin-top: 10px;
text-align:left;
}
.bor td {
border-color: Black;
border-style: dotted;
border-width: 0px;
border-top-width: 1px;
border-left-width: 1px;
padding: 2px;
word-wrap :break-word;
word-break :break-all;
table-layout:fixed;
}
.bor th {
border-color: Black;
border-style: dotted;
border-width: 0px;
border-top-width: 1px;
border-left-width: 1px;
padding: 3px;
text-align:center;
}
.title {
text-align: center;
font-size: 20px;
font-weight: bold;
vertical-align: central;
}
.tableHeadTDLeft {
width: auto;
text-align: right;
}
.tableHeadTDRight {
width: auto;
text-align: left;
}
.tableFootLeft {
width: 100px;
text-align: right;
}
.tableFootRight {
border-bottom: 1px solid #e9e9e9;
background-color: #fff;
display: block;
padding-top: 15px;
width: 100px;
}
</style>
<script src="../../js/jquery.min.js" type="text/javascript"></script>
<script src="../../js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../js/common.js" type="text/javascript"></script>
<script src="../../js/init.js" type="text/javascript"></script>
<script src="../../js/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../../js/printer_Grid.js"></script>
<script src="../../js/backspace_control.js"></script>
<script src="../../js/DateFormat.js"></script>
<script src="../../js/wms_printdocuments.js"></script>
<script type="text/javascript">
function init() {
var totalHeight = 370;
var doc_no = getUrlParam('doc_no');
var hid_t = "";
var hid_h = "";
var hid_f = "";
var hid_f_ex = "";
var rows;
$.ajax({
url: "../../ashx/wms/Purchase.ashx?action=getPurchaseArrivalPrinter",
data: { doc_no: doc_no },
type: "POST",
dataType: "text",
async: false,
success: function (data) {
strs = new Array();
strs = data.split("|-|");
hid_t = strs[0]; //document.getElementById('hid_t').value;
hid_h = strs[1]; //document.getElementById('hid_h').value;
hid_f = strs[2]; //document.getElementById('hid_f').value;
hid_f_ex = strs[3]; //document.getElementById('hid_f_ex').value;
$("#div_1").html(strs[4]);
//rows = $('#t_detail')[0].rows.length;//document.getElementById('t_detail').rows.length;
rows = $('#t_detail')[0].rows;
}
});
//打印分页
AutoPage.init(hid_t + hid_h, "t_detail", hid_f, totalHeight, "bor", "div_1",1);
}
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
</script>
</head>
<body>
<div style="width: 980px; text-align: center;">
<div id="div_1" style="width: 100%"></div>
</div>
<script>
document.onload = init();
</script>
</body>
</html>
//打印自动分页JSAutoPage = { header: null,//页面顶部显示的信息 content: null,//页面正文TableID footer: null,//页面底部 totalHeight: null,//总的高度 tableCss: null,//正文table样式 divID:null,//全文divID init: function (header, content, footer,totalHeight,tableCss,divID,type) { AutoPage.header = header; AutoPage.content = content; AutoPage.footer = footer; AutoPage.totalHeight = totalHeight; AutoPage.tableCss = tableCss; AutoPage.divID = divID; //初始化分页信息 if (type == 1) AutoPage.initPageSingle(); else if (type == 2) AutoPage.initPageDouble(); //隐藏原来的数据 AutoPage.hidenContent(); //开始分页 //AutoPage.beginPage(); }, //分页 重新设定HTML内容(单行) initPageSingle: function () { var tmpRows = $("#" + AutoPage.content)[0].rows; //表格正文 var height_tmp = 0; //一页总高度 var html_tmp = ""; //临时存储正文 var html_header = "<table class='"+AutoPage.tableCss+"'>"; var html_foot = "</table>"; var page = 0; //页码 var tr0Height = tmpRows[0].clientHeight; //table标题高度 var tr0Html = "<tr>" + tmpRows[0].innerHTML + "</tr>";//table标题内容 height_tmp = tr0Height; for (var i = 1; i < tmpRows.length ; i++) { var trHtmp = tmpRows[i].clientHeight;//第i行高度 var trMtmp = "<tr>" + tmpRows[i].innerHTML + "</tr>";//第i行内容 height_tmp += trHtmp; if (height_tmp < AutoPage.totalHeight) { if (height_tmp == tr0Height + trHtmp) { html_tmp += AutoPage.header + html_header + tr0Html; page++;//页码 } html_tmp += trMtmp; if (i == tmpRows.length - 1) { html_tmp += html_foot + AutoPage.footer; } } else { html_tmp += html_foot + AutoPage.footer + AutoPage.addPageBreak(); i--; height_tmp = tr0Height; } } $("#" + AutoPage.divID).html(html_tmp); var tdpagecount = $("*[name='tdPageCount']");//document.getElementsByName("tdPageCount"); for (var i = 0; i < tdpagecount.length; i++) { tdpagecount[i].innerText = (i + 1) + "/" + page; } }, //分页 重新设定HTML内容(双行) initPageDouble: function () { var tmpRows = $("#" + AutoPage.content)[0].rows; //表格正文 var height_tmp = 0; //一页总高度 var html_tmp = ""; //临时存储正文 var html_header = "<table class='" + AutoPage.tableCss + "'>"; var html_foot = "</table>"; var page = 0; //页码 var tr0Height = tmpRows[0].clientHeight+tmpRows[1].clientHeight; //table标题高度 var tr0Html = "<tr>" + tmpRows[0].innerHTML + "</tr>" + "<tr>" + tmpRows[1].innerHTML + "</tr>";//table标题内容 height_tmp = tr0Height; for (var i = 1; i < tmpRows.length ; i++) { var trHtmp = tmpRows[(i - 1) * 2].clientHeight + tmpRows[(i - 1) * 2+ 1].clientHeight;//第i行高度 var trMtmp = "<tr>" + tmpRows[(i - 1) * 2].innerHTML + "</tr>" + "<tr>" + tmpRows[(i - 1) * 2 + 1].innerHTML + "</tr>";//第i行内容 height_tmp += trHtmp; if (height_tmp < AutoPage.totalHeight) { if (height_tmp == tr0Height + trHtmp) { html_tmp += AutoPage.header + html_header + tr0Html; page++;//页码 } html_tmp += trMtmp; if (i == tmpRows.length - 1) { html_tmp += html_foot + AutoPage.footer; } } else { html_tmp += html_foot + AutoPage.footer + AutoPage.addPageBreak(); i--; height_tmp = tr0Height; } } $("#" + AutoPage.divID).html(html_tmp); var tdpagecount = $("*[name='tdPageCount']");//document.getElementsByName("tdPageCount"); for (var i = 0; i < tdpagecount.length; i++) { tdpagecount[i].innerText = (i + 1) + "/" + page; } }, //隐藏原来的数据 hidenContent: function () { $(AutoPage.header).hide(); $(AutoPage.content).hide(); $(AutoPage.footer).hide(); }, ////添加分页符 addPageBreak: function () { return "<p style='page-break-before:always;'></p>"; }, };