在使用window.print()时创建封面
在使用window.print()时创建封面
提问于 2020-06-04 20:55:32
我打印的时候有页眉和页脚。
但在第一页，我只希望封面干净。因此，我只能在那里有一个图片或标题。现在我的页眉和页脚也在这个封面上。我不想那样。
我试着用
@page:第一页{空白处:0；}
我仍然保留着页眉和页脚。
给我在CSS中做这件事的最简单的方法，并请解释为什么。
《守则》
<html>
<head>
<style>
</style>
</head>
<body>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;">
<h1 class="test">Text</h1>
</p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-06-05 15:04:23
您可以添加一个元素以显示为第一页，如下所示：
<div class="print-first-page">
your first page content here
</div>然后在屏幕上隐藏它，并在打印页面上显示：
.print-first-page {
display: none;
}
@media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}以下是您的代码的完整示例：
<head>
<style>
.print-first-page {
display: none;
}
@media print {
.print-first-page {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div class="print-first-page">
your first page content here
</div>
<div class="page-header ">
<table style="width:100%">
<tr>
<p>Hello</p>
</tr>
</table>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="masthead">
<p>Hello</p>
</div>
<div class="page">
<div>
<p class="test"> </p>
</div>
<div class=" col test-2">
<p>
Text
</p>
</div>
</div>
<div class="page">
<div>
<p class="test-3"> </p>
<h1 style="text-align:center">Text</h1>
</div>
<div style="margin-top: 100px;">
<p>Text.</p>
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
<div>
<p class="test-5"> </p>
<h2 style="text-align:left">Text</h2>
</div>
<div>
<p class="test-5"> </p>
</div>
<div>
<div>
<p class="test-5"> </p>
</div>
<br />
<div>
<p class="test-5"> </p>
</div>
<br />
</div>
</div>
<div class="page">
<div>
<p style="margin-top:10px;"><h1 class="test">Text</h1></p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62195137
复制相关文章
相似问题
腾讯云开发者
