印刷手動設定ページの印刷高さ自動改ページ(用紙の高さ設定が必要)

個人種目の記録だけして、ちょっと混乱します.  ,参考までに  
(別のバージョン   ページ印刷の固定本数を設定します.      参照  https://www.cnblogs.com/tenie/p/4851772.html)
大体の原理------テンプレート化--   先頭の中間データを合わせて合計高さがA 4紙より小さいです.印刷前に一度列に並べて、各列の高さを合わせて取得します.データが多すぎて、自動的に改行高さが自動的に変化します.   改ページを印刷して使用する       強制的に改行
 

  
    
	
  


  

  


    
XXXXXXXXXXXXXXX
    

      

        

			
    ：
			

		
		

			
*   ：
			

			
  ：
			

		
		

			
    ：
			

		
		

			
   ：
			

			
    ：
			

			
    ：
			

		
      
    
    

      
    
    

      
    
  






  
XXXXXXXXXXXX

  

    

      

        

			
    ：
			

		
		

			
*   ：
			

			
  ：
			

		
		

			
    ：
			

		
		

			
   ：
			

			
    ：
			

			
    ：
			

		
      
    
    

      
    
    

      
    
  



<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>




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;
				}
			}