0
印刷ボタンを使用して、ヘッダーとフッターの一部に@media printというルールを印刷しています。@page：最初にCSSで作業していません
最初のページと別のページでヘッダーを別にしたい。このため私は@page :firstルールを試しています。 MDN documentationから
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif
}
body,
html {
height: 100%;
line-height: 1.8;
}
@media screen {
header.onlyprint,
header.onlyprintf,
footer.onlyprint {
display: none;
/* Hide from screen */
}
}
.p {
display: none;
}
@media print {
#myHeader {
font-size: 30px;
}
.p {
display: initial;
}
.np {
display: none;
}
a[href]:after {
display: none;
}
header.onlyprint {
position: fixed;
/* Display only on print page (each) */
top: 0;
/* Because it's header */
text-align: center;
width: 100%;
}
footer.onlyprint {
position: fixed;
bottom: 0;
/* Because it's footer */
text-align: center;
width: 100%
}
@page :first {
header.onlyprint {
display: none;
}
header.onlyprintf {
position: relative;
/* Display only on print page (each) */
top: 0;
/* Because it's header */
text-align: center;
width: 100%;
}
}
}<body>
<button class="btn btn-large btn-success np" onClick="window.print()" style="position: fixed; top: 75px; left: 50%;">Print</button>
<header class="onlyprint">Header</header>
<footer class="onlyprint">Footer</footer>
<header class="onlyprintf">First Page Header</header>
Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some
Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br
/>Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some
Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br
/>Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />
あなたはこれをどのブラウザでテストしましたか？ – Quentin
@Quentinクロムでテストしています –