Question

我有一个应该打印的html文档。但是打印页面的每一页都应有边框，每页上也应有页眉和页脚重复。是否可以使用html和CSS？

@media print {
  header {
    display: block;
    color: red;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
  }
  footer {
    position: fixed;
    bottom: 0;
    display: block;
    color: red;
    width: 100%;
    height: 30px;
    margin-top: 20px;
  }
  #wrapper {
    border: 1px solid #000;
    padding: 30px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
  }
}

<body>
  <div id="wrapper">
    <header>
      <p>This is a header</p>
    </header>
    <section class="content">
      <p> Lorem </p>
    </section>
    <footer>
      <p>This is a footer</p>
    </footer>
  </div>
</body>

Answer 1

您可以使用jquery完成此操作。

将此代码放入index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

并将此代码放在header.html和footer.html中与index.html相同的位置

<a href="http://www.google.com">click here for google</a>

现在，当您访问index.html时，您应该可以单击链接标记。

在html文档的每个打印页面上重复页眉和页脚？每页也应该有一个边框

1 个答案: