僅做個人項目記錄 , 略微混亂 ,僅做參考
(另一種版本 設置頁面打印固定條數 參考 https://www.cnblogs.com/tenie/p/4851772.html)
大致原理 ------模板化 -- 頭尾中間數據加一起總高度小於A4紙高度, 打印前序列化一次, 獲取每個列的高度加一起,數據過多自動換行高度自動變化, 打印分頁 使用 <div style='page-break-after:always;'></div> 強制換行
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>XXXXXXXX</title>
<script src="../js/jquery-1.9.1.min.js"></script>
<style>
* {
margin: 0 auto;
padding: 0
}
.clear:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.table {
width: 90%;
margin: 0 auto
}
table {
font-size: 14px;
width: 95%;
border-collapse: collapse
}
thead td {
background: rgb(0, 170, 148);
color: #fff;
text-align: center;
}
table td {
border: 1px solid #dedede;
line-height: 26px;
padding: 3px;
}
.tool tr:first-child td {
border-top: none
}
.list tr:first-child td {
border-top: none
}
.allTable {
margin-top: 30px
}
</style>
</head>
<body>
<button id="serialization">打印</button>
<div class="box2">
<div>
<div style="font-weight:bold;font-size:25px;color:red;line-height:22px;text-align:center;">XXXXXXXXXXXXXXX</div>
<div class="title">
<table>
<tr>
<td style="width:16.6%">工作內容：</td>
<td class="czrw" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">* 類型：</td>
<td class="tylx" style="width:16.6%" colspan="2"></td>
<td style="width:16.6%">編號：</td>
<td class="bh" style="width:16.6%" colspan="2"></td>
</tr>
<tr>
<td style="width:16.6%">申請書號：</td>
<td class="jxpno" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">擬票人：</td>
<td class="nprname" style="width:16.6%"></td>
<td style="width:16.6%">擬票日期：</td>
<td class="npsj" style="width:16.6%"></td>
<td style="width:16.6%">執行日期：</td>
<td class="startdate" style="width:16.6%"></td>
</tr>
</table>
</div>
<div>
<table class="list listTable3">
<thead>
<tr>
<td>順序</td>
<td>受令單位</td>
<td>操作內容</td>
<td>備註</td>
</tr>
</thead>
</table>
</div>
<div class="tool">
<table>
<tr>
<td style="width:30%">審覈人</td>
<td class="shr"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="table" id="content" style="height: 0;opacity: 0">
<div style="font-weight:bold;font-size:25px;color:red;line-height:22px;text-align:center;">XXXXXXXXXXXX</div>
<div class="allTable table0">
<div class="title">
<table>
<tr>
<td style="width:16.6%">工作內容：</td>
<td class="czrw" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">* 類型：</td>
<td class="tylx" colspan="2"></td>
<td style="width:16.6%">編號：</td>
<td class="bh" colspan="2"></td>
</tr>
<tr>
<td style="width:16.6%">申請書號：</td>
<td class="jxpno" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">擬票人：</td>
<td class="nprname" style="width:16.6%"></td>
<td style="width:16.6%">擬票日期：</td>
<td class="npsj" style="width:16.6%"></td>
<td style="width:16.6%">執行日期：</td>
<td class="startdate" style="width:16.6%"></td>
</tr>
</table>
</div>
<div>
<table class="list">
<thead>
<tr>
<td>順序</td>
<td>受令單位</td>
<td>操作內容</td>
<td>備註</td>
</tr>
</thead>
</table>
</div>
<div class="tool">
<table>
<tr>
<td style="width:30%">審覈人</td>
<td class="shr"></td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/html" id="templateHTml">
<div></div>
<div style='page-break-after:always;'></div>
<div style="font-weight:bold;font-size:25px;color:red;line-height:22px;text-align:center;">XXXXXXXXXXX</div>
<div class="allTable {{claAll}}">
<div class="title">
<table>
<tr>
<td style="width:16.6%">工作內容：</td>
<td class="czrw1" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">* 類型：</td>
<td class="tylx1" style="width:16.6%" colspan="2"></td>
<td style="width:16.6%">編號：</td>
<td class="bh1" style="width:16.6%" colspan="2"></td>
</tr>
<tr>
<td style="width:16.6%">申請書號：</td>
<td class="jxpno1" style="width:16.6%" colspan="5"></td>
</tr>
<tr>
<td style="width:16.6%">擬票人：</td>
<td class="nprname1" style="width:16.6%"></td>
<td style="width:16.6%">擬票日期：</td>
<td class="npsj1" style="width:16.6%"></td>
<td style="width:16.6%">執行日期：</td>
<td class="startdate1" style="width:16.6%"></td>
</tr>
</table>
</div>
<div>
<table class="list">
<thead>
<tr>
<td>順序</td>
<td>受令單位</td>
<td>操作內容</td>
<td>備註</td>
</tr>
</thead>
</table>
</div>
<div class="tool">
<table>
<tr>
<td style="width:30%">審覈人</td>
<td class="shr1"></td>
</tr>
</table>
</div>
</div>
</script>
</body>
<script>
function decodeUrl() {
if (window.location.href.indexOf("?") !== -1) {
var code = decodeURIComponent(window.location.href).split('?')[1]
var objUrl = {}
code.split('&')
for (var i = 0; i < code.split('&').length; i++) {
objUrl[code.split('&')[i].split('=')[0]] = code.split('&')[i].split('=')[1]
}
return objUrl
}
}
var data = "";
printGetCzpZBandMX();
function printGetCzpZBandMX(){
$.ajax({
async : false,
url : "/netorder/mlcz/czp/printGetCzpZBandMX",
type : "post",
dataType : "json",
data:{
zbid: decodeUrl().zbid
},
success : function(result) {
var mxlist = result.mxList;
var zbMap = result.zbMap;
if(result!=null){
if(zbMap!=null){
$(".shr").append('<p>'+ ifNull(zbMap.SHR) +'</p>')
$(".jxpno").append('<p>'+ ifNull(zbMap.JXPNO) +'</p>')
$(".bh").append('<p>'+ ifNull(zbMap.BH) +'</p>')
$(".nprname").append('<p>'+ ifNull(zbMap.NPRNAME) +'</p>')
$(".tylx").append('<p>'+ ifNull(zbMap.TYLX) +'</p>')
$(".czrw").append('<p>'+ ifNull(zbMap.CZRW) +'</p>')
$(".npsj").append('<p>'+ ifNull(zbMap.NPSJ) +'</p>')
$(".startdate").append('<p>'+ ifNull(zbMap.STARTDATE) +'</p>')
}
if(mxlist.length>0){
data = result;
}
}
},
error : function(msg) {
console.log("獲取 主表-明細 失敗")
}
});
}
for (let i = 0; i < data.mxList.length; i++) {
$('.listTable3').append(
`<tr>
<td>${ifNull(data.mxList[i].ZLXH)}</td>
<td>${ifNull(data.mxList[i].CZSN)}</td>
<td>${ifNull(data.mxList[i].CZNR)}</td>
<td>${ifNull(data.mxList[i].REMARK)}</td>
</tr>`
)
}
$('#serialization').click(function () {
serializationList(data)
})
function serializationList(str) {
let startIndex = 0
/* domTableAllName.find('.shr').append(`<p>${ifNull(data.zbMap.SHR)}</p>`)
domTableAllName.find('.jxpno').append(`<p>${ifNull(data.zbMap.JXPNO)}</p>`)
domTableAllName.find('.bh').append(`<p>${ifNull(data.zbMap.BH)}</p>`)
domTableAllName.find('.nprname').append(`<p>${ifNull(data.zbMap.NPRNAME)}</p>`)
domTableAllName.find('.tylx').append(`<p>${ifNull(data.zbMap.TYLX)}</p>`)
domTableAllName.find('.czrw').append(`<p>${ifNull(data.zbMap.CZRW)}</p>`)
domTableAllName.find('.npsj').append(`<p>${ifNull(data.zbMap.NPSJ.time)}</p>`)
domTableAllName.find('.startdate').append(`<p>${ifNull(data.zbMap.STARTDATE.time)}</p>`) */
for (let i = 0; i < str.mxList.length; i++) {
let tableAllName = `table${startIndex}`
let domTableAllName = $(`.${tableAllName}`)
//console.log(domTableAllName[0].offsetHeight)
if (domTableAllName[0].offsetHeight > 570) {
if (i === str.mxList.length - 1) {
return
}
startIndex++
tableAllName = `table${startIndex}`
let templateHtml = $('#templateHTml').html().replace(/{{claAll}}/, tableAllName)
$('#content').append(templateHtml)
}
domTableAllName.find('.list').append(
`<tr>
<td>${ifNull(data.mxList[i].ZLXH)}</td>
<td>${ifNull(data.mxList[i].CZSN)}</td>
<td>${ifNull(data.mxList[i].CZNR)}</td>
<td>${ifNull(data.mxList[i].REMARK)}</td>
</tr>`
)
}
$(".shr1").append('<p>'+ ifNull(data.zbMap.SHR) +'</p>')
$(".jxpno1").append('<p>'+ ifNull(data.zbMap.JXPNO) +'</p>')
$(".bh1").append('<p>'+ ifNull(data.zbMap.BH) +'</p>')
$(".nprname1").append('<p>'+ ifNull(data.zbMap.NPRNAME) +'</p>')
$(".tylx1").append('<p>'+ ifNull(data.zbMap.TYLX) +'</p>')
$(".czrw1").append('<p>'+ ifNull(data.zbMap.CZRW) +'</p>')
$(".npsj1").append('<p>'+ ifNull(data.zbMap.NPSJ) +'</p>')
$(".startdate1").append('<p>'+ ifNull(data.zbMap.STARTDATE) +'</p>')
$('#content').removeAttr('style')
$('.box2').hide()
$('#serialization').hide()
$('.dayin').hide()
window.print();
}
function ifNull(data) {
if (data===null){
return ""
}else {
return data;
}
}
</script>
</html>