CSS 制作纸张打印预览页面
每个图片占一个开头页，不跨页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品检疫报告</title>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Calibri',sans-serif;
color:#333;
line-height:1.6;
background-color:#f7f7f7;
}
.page {
width:210mm;
min-height:297mm;
margin:10mm auto;
padding:20px;
background-color:white;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.title {
font-size:2em;
margin-bottom:10px;
text-align:center;
}
.author {
font-size:0.8em;
color:#777;
text-align:center;
}
.page-number,.page-number-footer {
text-align:right;
font-size:0.8em;
color:#777;
}
.content p {
margin:15px 0;
text-indent:1em;
}
.lead::first-letter {
float:left;
font-size:3em;
line-height:1;
padding-right:8px;
padding-top:4px;
}
.content ul {
list-style-type:disc;
margin-left:20px;
}
table {
width:100%;
border-collapse:collapse;
margin:20px 0;
}
table th,table td {
border:1px solid #ddd;
padding:8px;
text-align:left;
}
table thead th {
background-color:#eee;
font-weight:bold;
}
.image-container {
display:flex;
justify-content:center;
margin:0;
padding: 0;
}
.image-container img {
width:100%;
max-width:100%;
height:auto;
/*box-shadow:0 2px 4px rgba(0,0,0,0.1);*/
}
footer {
margin-top:20px;
border-top:1px dotted #ccc;
padding-top:10px;
}
.beian {
float:right;
color:#333;
text-decoration:none;
}
/* 页面设置 */
@page {
size: A4;
margin: 2cm;
}
@media print {
body {
@page {
size: A4; /* 假设使用A4纸张大小 */
margin: 1cm; /* 页面边缘留白 */
}
}
.page {
width:100%;
margin:0;
padding:0;
border:none;
box-shadow:none;
}
.image-container {
page-break-inside: avoid; /* 避免在元素内部断开页面 */
break-inside: avoid; /* 新标准的写法 */
display: block; /* 确保元素是一个块级元素 */
clear: both; /* 清除浮动 */
margin-top: 50px; /* 可以添加额外的顶部边距，如果需要的话 */
margin-bottom: 50px; /* 可以添加额外的底部边距，如果需要的话 */
page-break-before: always; /* 每个图像容器前总是开始新的一页 */
break-before: always; /* 新标准的写法 */
}
header,footer,.content ul{
display: none;
}
.image-container img {
max-height: calc(100vh - 100px); /* 减少20px的高度 */
}
}
</style>
</head>
<body>
<div class="page">
<header>
<h1 class="title">商品检疫报告</h1>
<p class="author">时间: <script>document.write(new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日' )</script></p>
</header>
<main>
<section class="content">
<h2>章节标题一</h2>
<p class="lead">这是文档的第一段，它有一个较大的首字下沉。</p>
<p>这是文档的第二段，它包含了一些常规的文本。</p>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<table>
<!-- 表格内容 -->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>
@foreach ($list as $goods)
<ul>
<li>{{ $goods['title'] }}</li>
</ul>
@foreach ($goods['quarantine_list'] as $quarantine)
<div class="image-container">
<img src="{{ $quarantine['image'] }}" alt="商品检疫报告">
</div>
@endforeach
@endforeach
@if (empty($list))
<p style="padding: 250px 0;text-align: center;font-size: 24px;color: #999;">提示:此商品可能暂未上传检疫报告，如有需要可与客服联系!</p>
@endif
</section>
</main>
{{-- <footer>--}}
{{-- <p>版权所有 © <script>document.write(new Date().getFullYear())</script> xxx科技有限公司<a href="https://beian.miit.gov.cn" class="beian" target="_blank">滇xxx备202xxx5号-2</a></p>--}}
{{-- </footer>--}}
</div>
</body>
</html>