m0_37900438
dczlds
2021-06-24 22:28
采纳率: 0%
浏览 74
已结题

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

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

  • 点赞
  • 收藏

5条回答 默认 最新

  • Feng_wwf
    NDSC专家-王文峯 2021-06-24 22:36

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

    .page {
      margin: auto;
      padding: 2cm;
      width: 21cm;
      height: 29.7cm;
      border: 1px #D3D3D3 solid;
      background: white;
    }
    点赞 评论
  • weixin_46555072
    望采纳最优答案 2021-06-24 22:53
    <!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>

    有帮助 望采纳

    点赞 评论
  • qq_40602449
    li.siyuan 2021-06-24 22:54

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

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

    点赞 评论
  • qq_45569373
    二十不忘 2021-06-24 22:55

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

    点赞 评论
  • cpongo1
    cpongo1 2021-06-24 23:25

    这个问题提的真好 img

    点赞 评论

相关推荐