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

Question

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

Answer 1

You can use the print media query in your css like that:

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

It is also applied if the user decides to print the page without window.print

For further methods of styling for print take a look at the @page rule. But keep in mind that browser support isn't great yet

Answer 2

Example For custom Print

 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>