Table打印 根据高度自动分页
最近打印单据，遇到表头不变，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>
//打印自动分页JS
AutoPage = {
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>";
},
};
---------------------
作者：zzh1063
来源：****
原文：https://blog.****.net/zzh1063/article/details/49678287
版权声明：本文为博主原创文章，转载请附上博文链接！