Question

当我使用这个window.print方法时它显示默认的页眉和页脚我想在打印文档的标题中添加一些样式和图像

Answer 1

您可以像这样在CSS中使用印刷媒体查询：

@media print {
 /* styles go here */
}

如果用户决定在不使用window.print的情况下打印页面

Answer 2

自定义打印示例

function myFunction() {
  window.print();
}

.Print{
    display:none   !important;
 }
 .NoPrint{
    display:block  !important;
 }
 
nav {
 margin-bottom:10px;
 border-bottom: solid 1px #000;
 
 }
 
 footer{
  border-top: solid 1px #000;
  margin-top:10px;
  }
 footer , nav > a{
 Font-size:30px; 
 width:100%;
    text-align: center;
 }
 
@media print {
 .Print{
    display: block !important;
 }
 .NoPrint{
    display: none !important;
 }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<nav class="nav Print">
  <a class="nav-link active" href="#">Print Logo</a>

</nav>

<nav class="nav NoPrint">
  <a class="nav-link active" href="#">Active</a>

</nav>

<p>Click the button to print the current page.</p>

<button onclick="myFunction()">Print this page</button>
<footer class="Print">
Print copy rghit 
</footer>
<footer class="NoPrint">
 copy rghit 
</footer>

如何使用Java脚本中的window.print方法更改页眉和页脚样式？

2 个答案: