如何将复杂html按A4的格式分页显示？

html内容比较复杂，有复杂表，分页时不能将表拆错位，，并可自定义页眉页脚，若能提供方法重谢！

<!DOCTYPE html>
<html>

	<head>
		<title>打印</title>
		<meta charset="utf-8">
		<style>
			.printBox {
				width: 300px;
				height: 300px;
				border: 1px solid blue;
			}
		</style>
		<!-- 打印的样式-->
		<style media="print">
			@page {
				size: auto;
				margin: 0mm;
			}
		</style>
	</head>

	<body>
		<div class="printBox">
			this is content!!!<br> 点击按钮打印
		</div>
		<button onclick='print_page()'>打印</button>
	</body>

	<script type="text/javascript">
		function print_page() {
			if(!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
				remove_ie_header_and_footer();
			}
			window.print();
		}

		function remove_ie_header_and_footer() {
			var hkey_path;
			hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
			try {
				var RegWsh = new ActiveXObject("WScript.Shell");
				RegWsh.RegWrite(hkey_path + "header", "");
				RegWsh.RegWrite(hkey_path + "footer", "");
			} catch(e) {}
		}
	</script>

</html>

有帮助望采纳

https://blog.csdn.net/qq_41974199/article/details/113406601

看一下这篇文章应该是你需要的

html网页可以采用div的css属性控制显示和隐藏来实现分页目的。
display:block; 这个css属性可以让div显示出来；
display:none; 这个css属性可以让div隐藏起来；
例如：
<div id="page1" style="display:block;">这是第1页的内容</div>
<div id="page2" style="display:none;">这是第2页的内容</div>
<div id="page3" style="display:none;">这是第3页的内容</div>
增加3个按钮，分别是第1页，第2页，第3页，每个按钮设置对应的点击事件。
例如：
<a href="javascript:showpage(1);">第1页</a>
<a href="javascript:showpage(2);">第2页</a>
<a href="javascript:showpage(3);">第3页</a>
通过javascript点击事情来修改div的css属性display的值，就可以切换页面。
例如：
<script>
function showpage(page){
for(var i=1;i<=3;i++) {
if (page==i){
document.getElementById("page"+page).style.display="block";
} else {
document.getElementById("page"+page).style.display="none";
}
}
}
</script>

望采纳，可以通过设置 css属性

.page {
  margin: auto;
  padding: 2cm;
  width: 21cm;
  height: 29.7cm;
  border: 1px #D3D3D3 solid;
  background: white;
}