Flow/inspect-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
310a0d0df1
inspect-front/public/templates/report-template.html

1288 lines
43 KiB
HTML
Raw Normal View History

修改打印报告
2025-03-17 10:18:30 +08:00
<!DOCTYPE html>
<html lang="zh">
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体检检查报告</title>
<!-- 添加PDF.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<style>
修改报告样式
2025-03-18 11:08:26 +08:00
/* 体质辨识结果表格样式 */
.constitution-table {
width: 100%;
border-collapse: collapse;
修改报告首页样式
2025-03-19 14:52:42 +08:00
margin: 10px auto 30px;
/* 上边距10px，左右auto居中，下边距30px留出空间 */
修改报告样式
2025-03-18 11:08:26 +08:00
}
.constitution-table td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
/* 头像容器样式 */
.avatar-container {
width: 120px;
height: 160px;
修改报告首页样式
2025-03-19 14:52:42 +08:00
margin: 50px auto;
修改报告样式
2025-03-18 11:08:26 +08:00
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.avatar-image {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
/* 调整下方内容的间距 */
.person_detail:first-child {
margin-top: 20px;
}
修改报告样式
2025-03-17 16:43:28 +08:00
.report-container {
修改打印报告
2025-03-17 10:18:30 +08:00
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-item {
margin-bottom: 40px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
修改报告样式
2025-03-17 16:43:28 +08:00
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
样式修改
2025-03-17 16:08:40 +08:00
width: 800px;
height: 1123px;
margin: 0 auto 40px;
position: relative;
修改打印报告
2025-03-17 10:18:30 +08:00
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-title {
background-color: #4a90e2;
color: white;
padding: 15px;
修改报告首页样式
2025-03-19 14:52:42 +08:00
font-size: 18px;
/* 这里控制字体大小 */
font-weight: bold;
/* 这里控制字体粗细 */
修改打印报告
2025-03-17 10:18:30 +08:00
border-bottom: 1px solid #e0e0e0;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-content {
padding: 20px;
text-align: center;
background-color: white;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-content img {
max-width: 100%;
height: auto;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-content iframe {
width: 100%;
height: 800px;
border: none;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.report-summary {
padding: 15px;
修改一般检查样式
2025-03-19 15:25:24 +08:00
background-color: transparent;
修改边框颜色
2025-03-19 15:27:32 +08:00
border-top: 1px solid #000 !important;
修改打印报告
2025-03-17 10:18:30 +08:00
}
/* 新增表格样式 */
.exam-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
修改报告样式
2025-03-17 16:43:28 +08:00
.exam-table th,
.exam-table td {
修改边框颜色
2025-03-19 15:27:32 +08:00
border: 1px solid #000 !important;
修改打印报告
2025-03-17 10:18:30 +08:00
padding: 12px;
text-align: left;
修改报告首页样式
2025-03-19 14:52:42 +08:00
font-size: 16px;
/* 可以在这里设置字体大小 */
修改打印报告
2025-03-17 10:18:30 +08:00
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.exam-table th {
background-color: #f5f5f5;
font-weight: bold;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.exam-table tr:nth-child(even) {
background-color: #fafafa;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
/* 默认隐藏打印占位符和打印专用内容 */
.print-placeholder {
display: none;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.print-only {
display: none;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.pdf-loading {
text-align: center;
padding: 20px;
font-style: italic;
color: #666;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.pdf-error {
color: red;
text-align: center;
padding: 20px;
border: 1px solid #ffcccc;
background-color: #fff8f8;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.pdf-page-info {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 10px;
}
/* 加载动画 */
.loading-spinner {
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
margin: 0 auto 10px;
animation: spin 1s linear infinite;
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
@keyframes spin {
修改报告样式
2025-03-17 16:43:28 +08:00
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
修改打印报告
2025-03-17 10:18:30 +08:00
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
.pdf-image-container img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
margin: 10px 0;
}
修改报告样式
2025-03-17 16:43:28 +08:00
/* 打印专用样式 - 完全重写 */
@media print {
body {
margin: 0;
padding: 0;
}
.report-container {
padding: 0;
max-width: none;
}
修改报告样式
2025-03-18 11:08:26 +08:00
/* 体质辨识结果表格样式 */
.constitution-table {
width: 100%;
font-size: 12px;
}
.constitution-table td {
padding: 5px;
border: 1px solid #000 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
修改报告样式
2025-03-17 16:43:28 +08:00
/* 一般检查特殊处理 */
.general-exam {
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: always !important;
break-after: page !important;
修改报告样式
2025-03-18 11:08:26 +08:00
height: 1123px !important;
/* 设置固定高度，与其他报告一致 */
样式修改
2025-03-17 17:16:02 +08:00
width: 800px !important;
margin: 0 auto !important;
修改报告样式
2025-03-17 16:43:28 +08:00
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
display: block !important;
overflow: visible !important;
修改报告样式
2025-03-18 11:08:26 +08:00
position: relative !important;
/* 确保可以放置绝对定位的页脚 */
样式修改
2025-03-17 17:16:02 +08:00
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
/* 确保一般检查的页脚正确显示 */
.general-exam .report-footer {
position: absolute !important;
bottom: 30px !important;
left: 10px !important;
right: 10px !important;
border-top: 1px solid #000 !important;
padding-top: 5px !important;
display: block !important;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
.general-exam .report-footer-text {
font-size: 10px !important;
margin: 0 !important;
font-style: italic !important;
text-align: right !important;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
/* 确保一般检查的页码正确显示 */
.general-exam .page-number {
position: absolute !important;
bottom: 10px !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
font-size: 10px !important;
display: block !important;
修改报告样式
2025-03-17 16:43:28 +08:00
}
/* 一般检查的内容区域 */
.general-exam .report-content {
padding: 5px !important;
margin: 0 !important;
display: block !important;
overflow: visible !important;
height: auto !important;
}
/* 一般检查的表格 */
.general-exam .exam-table {
修改一般检查样式
2025-03-19 15:25:24 +08:00
margin: 20px 0 40px !important; /* 下边距从0增加到40px */
修改报告样式
2025-03-17 16:43:28 +08:00
}
.general-exam .exam-table th,
.general-exam .exam-table td {
修改一般检查样式
2025-03-19 15:25:24 +08:00
padding: 8px !important;
font-size: 18px !important;
line-height: 1.5;
height: 40px; /* 降低单元格高度 */
修改报告样式
2025-03-17 16:43:28 +08:00
}
/* 一般检查的小结 */
.general-exam .report-summary {
padding: 5px !important;
修改一般检查样式
2025-03-19 15:25:24 +08:00
bottom: 170px !important;
min-height: auto; /* 移除固定高度 */
margin-bottom: 0 !important;
left: 20px;
right: 20px;
position: absolute;
font-size: 14px !important;
background-color: transparent !important;
修改报告样式
2025-03-17 16:43:28 +08:00
}
.general-exam .report-summary h4 {
修改一般检查样式
2025-03-19 15:25:24 +08:00
margin-bottom: 10px !important;
font-size: 16px !important;
修改报告样式
2025-03-17 16:43:28 +08:00
}
.general-exam .report-summary p {
margin: 2px 0 !important;
修改一般检查样式
2025-03-19 15:25:24 +08:00
font-size: 14px !important;
line-height: 1.6;
修改报告样式
2025-03-17 16:43:28 +08:00
}
/* 其他报告项目的样式 */
.report-item:not(.general-exam) {
page-break-after: always;
break-after: page;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 最后一个报告不需要分页 */
.report-item:last-child {
page-break-after: auto;
break-after: auto;
}
/* 标题样式 */
h1 {
font-size: 18px;
margin: 10px 0;
}
.report-title {
padding: 8px 10px;
font-size: 16px;
background-color: #4a90e2 !important;
color: white !important;
}
/* 内容区域 */
.report-item:not(.general-exam) .report-content {
padding: 10px;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
/* 表格样式 */
.report-item:not(.general-exam) .exam-table {
margin: 10px 0;
}
.report-item:not(.general-exam) .exam-table th,
.report-item:not(.general-exam) .exam-table td {
padding: 5px;
font-size: 11px;
}
/* 小结部分 */
.report-item:not(.general-exam) .report-summary {
padding: 8px;
样式修改
2025-03-17 17:16:02 +08:00
margin-bottom: 80px !important;
修改报告样式
2025-03-17 16:43:28 +08:00
font-size: 11px;
修改一般检查样式
2025-03-19 15:25:24 +08:00
background-color: transparent !important;
修改报告样式
2025-03-17 16:43:28 +08:00
}
.report-item:not(.general-exam) .report-summary h4 {
margin: 3px 0;
}
.report-item:not(.general-exam) .report-summary p {
margin: 3px 0;
}
/* PDF图片容器 */
.pdf-image-container {
max-height: 500px;
overflow: hidden;
width: 100%;
text-align: center;
}
.pdf-image-container img {
max-width: 100%;
max-height: 480px;
object-fit: contain;
margin: 0 auto;
border: none;
}
.pdf-page-info {
font-size: 9px;
margin-top: 3px;
}
/* 隐藏屏幕元素 */
.screen-only {
display: none !important;
}
/* 显示打印元素 */
.print-only {
display: block !important;
}
/* 确保背景色和边框在打印时可见 */
.report-title,
.exam-table th,
.exam-table td,
.report-summary {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* 页面设置 */
@page {
margin: 0.5cm;
size: A4 portrait;
}
/* 超声检查报告的特殊样式 */
.ultrasound-exam .pdf-image-container {
max-height: 800px !important;
/* 增加高度 */
}
.ultrasound-exam .pdf-image-container img {
max-width: 100% !important;
max-height: 880px !important;
/* 增加高度 */
object-fit: contain !important;
}
/* 调整超声检查报告的内容区域 */
.ultrasound-exam .report-content {
padding: 5px !important;
}
/* 调整超声检查报告的小结部分 */
.ultrasound-exam .report-summary {
padding: 5px !important;
样式修改
2025-03-17 17:16:02 +08:00
margin-bottom: 80px !important;
修改报告样式
2025-03-17 16:43:28 +08:00
font-size: 10px !important;
}
.ultrasound-exam .report-summary p {
margin: 3px 0 !important;
font-size: 10px !important;
}
/* 所有报告项目的打印样式 */
.report-item {
page-break-after: always;
break-after: page;
margin: 0 auto;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
width: 800px;
height: 1123px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
}
/* 添加首页样式 */
.repott_concent {
width: 561px;
height: 397px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.repott_concent_area {
display: flex;
justify-content: center;
}
.repott_concent_title {
修改报告首页样式
2025-03-19 14:52:42 +08:00
font-size: 30pt;
修改报告样式
2025-03-17 16:43:28 +08:00
letter-spacing: 30px;
}
.repott_concent_english {
display: flex;
justify-content: center;
margin-top: 17px;
}
.repott_concent_english_health {
font-size: 15pt;
width: 174px;
text-align: center;
}
.repott_concent_Examination {
font-size: 15pt;
width: 152px;
text-align: center;
}
.repott_concent_Report {
font-size: 15pt;
width: 204px;
text-align: center;
}
.person_detail {
display: flex;
justify-content: center;
margin-bottom: 14px;
}
.person_title {
font-size: 15pt;
letter-spacing: 30px;
}
.person_content {
font-size: 15pt;
width: 235px;
text-align: center;
border-bottom: 1px solid;
}
.preface-content .footer {
margin-top: 40px;
width: 100%;
修改报告样式
2025-03-18 11:08:26 +08:00
text-align: right;
/* 整个footer右对齐 */
修改报告样式
2025-03-17 16:43:28 +08:00
}
.preface-content .hospital-name {
margin-bottom: 20px;
font-weight: normal;
}
.preface-content .slogan {
font-style: normal;
}
.underline {
display: inline-block;
min-width: 100px;
border-bottom: 1px solid #000;
text-align: center;
修改报告样式
2025-03-18 11:08:26 +08:00
margin: 0 5px;
/* 增加左右间距 */
修改报告样式
2025-03-17 16:43:28 +08:00
}
样式修改
2025-03-17 17:16:02 +08:00
/* 添加页码样式 */
.page-number {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
/* 打印时的页码样式 */
@media print {
.page-number {
bottom: 10px;
font-size: 10px;
}
}
/* 调整页脚样式，避免与页码重叠 */
.report-footer {
position: absolute;
bottom: 40px;
left: 20px;
right: 20px;
border-top: 1px solid #000;
padding-top: 10px;
text-align: right;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
.report-footer-text {
margin: 0;
font-size: 12px;
font-style: italic;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
/* 打印时的页码样式 */
@media print {
.report-footer {
position: absolute;
bottom: 30px;
left: 10px;
right: 10px;
border-top: 1px solid #000;
padding-top: 5px;
}
修改报告样式
2025-03-18 11:08:26 +08:00
样式修改
2025-03-17 17:16:02 +08:00
.report-footer-text {
font-size: 10px;
}
}
修改报告样式
2025-03-18 11:08:26 +08:00
/* 首页页码在预览时隐藏 */
.first-page-number {
display: none;
}
/* 打印时显示首页页码 */
@media print {
.first-page-number {
display: block;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
font-size: 10px;
}
}
前言页样式调整
2025-03-19 09:53:03 +08:00
/* 前言页面样式 */
.preface-wrapper {
padding: 20px;
}
.preface-content {
max-width: 600px;
margin: 0 auto;
}
.preface-greeting {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.preface-paragraphs {
margin-bottom: 20px;
}
.preface-footer {
text-align: right;
}
.hospital-name {
font-weight: bold;
}
汇总页面样式修改
2025-03-19 14:48:37 +08:00
/* 新增汇总部分样式 */
.summary-section {
padding: 15px 30px !important;
}
.summary-title {
text-align: center !important;
margin-bottom: 30px !important;
font-size: 24px !important;
color: #333;
}
.summary-notice {
margin: 20px 0 0 !important;
}
.notice-text {
text-align: left !important;
margin: 0 0 5px 0 !important;
font-size: 14px;
}
.notice-line {
border-bottom: 1px solid #000;
width: 100%;
}
.summary-content {
white-space: pre-wrap !important;
text-align: left !important;
margin: 15px 40px !important;
font-size: 16px;
line-height: 1.6;
}
.summary-tip {
margin-top: 20px !important;
padding: 15px !important;
border-radius: 4px;
}
.summary-tip p {
font-size: 14px !important;
line-height: 1.5;
}
/* 打印样式调整 */
@media print {
.summary-title {
font-size: 20px !important;
margin-bottom: 20px !important;
}
.notice-text {
font-size: 14px !important;
}
.summary-content {
font-size: 16px !important;
margin: 10px 30px !important;
}
.summary-tip {
margin-top: 17px !important;
padding: 10px !important;
background-color: transparent !important;
}
.summary-tip p {
font-size: 14px !important;
}
}
修改打印报告
2025-03-17 10:18:30 +08:00
</style>
</head>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<body>
<div class="report-container">
样式修改
2025-03-17 16:08:40 +08:00
<!-- 添加首页 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
修改报告样式
2025-03-18 11:08:26 +08:00
<span>&nbsp;&nbsp;体检编号：--</span>
修改报告
2025-03-17 18:02:47 +08:00
</div>
</div>
修改报告首页样式
2025-03-19 14:52:42 +08:00
<!-- 添加标题下方的文字，靠右对齐 -->
<div style="text-align: right; padding: 10px 20px; font-size: 16px; color: #333;">
本报告属个人隐私范畴</br>
未获本人同意，不得传播
</div>
<div class="repott_concent" style="top: -350px;">
<div style="display: flex; align-items: flex-start; justify-content: center; margin-bottom: 20px;">
<img src="/首页标签.png" alt="logo"
style="width: 85px; height: 92px; ">
<div>
<div class="repott_concent_area">
<div class="repott_concent_title">健康</div>
<div class="repott_concent_title">体检</div>
<div class="repott_concent_title">报告</div>
</div>
<div class="repott_concent_english">
<div class="repott_concent_english_health">Health</div>
<div class="repott_concent_Examination">Examination</div>
<div class="repott_concent_Report">Report</div>
</div>
</div>
样式修改
2025-03-17 16:08:40 +08:00
</div>
修改报告样式
2025-03-18 11:08:26 +08:00
<!-- 添加头像区域 -->
<div class="avatar-container">
<img src="" alt="头像" class="avatar-image" id="avatar-image">
</div>
样式修改
2025-03-17 16:08:40 +08:00
<div style="margin-top: 100px;">
<div class="person_detail">
<span class="person_title">姓名</span><span class="person_content">--</span>
</div>
<div class="person_detail">
<span class="person_title">性别</span><span class="person_content">--</span>
</div>
<div class="person_detail">
<span class="person_title">年龄</span><span class="person_content">--</span>
</div>
<div class="person_detail">
修改首页样式
2025-03-19 15:18:04 +08:00
<span class="person_title" style="letter-spacing: 4px;">身份证号</span><span
class="person_content">--</span>
样式修改
2025-03-17 16:08:40 +08:00
</div>
<div class="person_detail">
修改报告样式
2025-03-17 16:43:28 +08:00
<span class="person_title" style="letter-spacing: 4px;">联系电话</span><span
class="person_content">--</span>
样式修改
2025-03-17 16:08:40 +08:00
</div>
<div class="person_detail">
修改报告样式
2025-03-17 16:43:28 +08:00
<span class="person_title" style="letter-spacing: 4px;">体检日期</span><span
class="person_content">--</span>
样式修改
2025-03-17 16:08:40 +08:00
</div>
</div>
</div>
修改报告样式
2025-03-18 11:08:26 +08:00
<!-- 添加 first-page-number 类 -->
<div class="page-number first-page-number">第1页</div>
样式修改
2025-03-17 16:08:40 +08:00
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<!-- 前言 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
去除控制台调试信息
2025-03-19 09:42:58 +08:00
<span></span>
修改报告
2025-03-17 18:02:47 +08:00
<span>填充值</span>
修改报告首页样式
2025-03-19 14:52:42 +08:00
修改报告
2025-03-17 18:02:47 +08:00
</div>
</div>
前言页样式调整
2025-03-19 09:53:03 +08:00
<div class="preface-wrapper">
<div class="preface-content">
<h1 style="text-align: center; margin-bottom: 60px;">前言</h1>
<p class="preface-greeting">尊敬的<span class="underline"></span>先生/女士：</p>
修改报告样式
2025-03-17 16:43:28 +08:00
前言页样式调整
2025-03-19 09:53:03 +08:00
<div class="preface-paragraphs">
修改报告样式
2025-03-18 11:08:26 +08:00
<p>您好！欢迎参加国家基本公共卫生服务老年人健康体检项目。</p>
修改报告样式
2025-03-17 16:43:28 +08:00
<p>健康体检是在自我感觉健康的情况下，通过医学手段对身体各脏器的状态进行的检测。定期的健康体检可以帮助您及早发现健康状态下的危机，为您的健康保驾护航。</p>
<p>希望您仔细阅读并妥善保管这份体检报告，给予充分的重视。如有疑问请及时与我院进行联系。</p>
<p>我们希望能够与您建立长期的联系，并为您建立健康档案，以便对您的健康状态进行长期的追踪，为您的健康提供长期的帮助和服务。</p>
<p>由于体检项目和检测手段所限，一次体检不能全部检出身体中的潜在隐患，一旦发现身体出现不适，请及时到医院进行就诊。</p>
</div>
前言页样式调整
2025-03-19 09:53:03 +08:00
<div class="preface-footer">
修改首页样式
2025-03-19 15:18:04 +08:00
<p class="hospital-name">兴和县卫生健康委员会</p>
修改报告样式
2025-03-17 16:43:28 +08:00
</div>
</div>
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
<div class="page-number">第2页</div>
样式修改
2025-03-17 14:54:53 +08:00
</div>
修改报告样式
2025-03-18 11:08:26 +08:00
</br>
<!-- 汇总 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
修改首页样式
2025-03-19 15:18:04 +08:00
<span></span>
修改报告样式
2025-03-18 11:08:26 +08:00
<span>填充值</span>
</div>
</div>
汇总页面样式修改
2025-03-19 14:48:37 +08:00
<div class=" summary-section">
<h2 class="summary-title">检查结果汇总</h2>
<div class="summary-notice">
<p class="notice-text">在本次体检的项目中，您有以下几方面的情况敬请注意：</p>
<div class="notice-line"></div>
</div>
<div class="paragraph-group">
<p id="summary-year" class="summary-content">
<span class="year-value">
</p>
</div>
<div class="summary-tip">
<p>温馨提示:本次体检未发现异常的部分，不代表完全没有潜在性疾病，如有疾病或身体不适，要立即就医。</p>
</div>
修改报告样式
2025-03-18 11:08:26 +08:00
</div>
<div class="report-footer">
<p class="report-footer-text">定期体检，尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">第3页</div>
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<p> </p>
<!-- 一般检查部分 -->
<div class="report-item general-exam">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>一般检查</span>
<span>填充值</span>
</div>
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<div class="report-content">
<table class="exam-table">
<thead>
<tr>
<th>检查项目</th>
<th>检查结果</th>
</tr>
</thead>
<tbody>
<tr>
<td>体温</td>
<td>--</td>
</tr>
<tr>
<td>脉率</td>
<td>--</td>
</tr>
<tr>
<td>呼吸频率</td>
<td>--</td>
</tr>
<tr>
<td>血压</td>
<td>--</td>
</tr>
<tr>
<td>腰围</td>
<td>--</td>
</tr>
<tr>
<td>身高</td>
<td>--</td>
</tr>
<tr>
<td>体重</td>
<td>--</td>
</tr>
<tr>
<td>体质指数(BMI)</td>
<td>--</td>
</tr>
</tbody>
</table>
</div>
<div class="report-summary">
<h4>体检科小结：</h4>
<p>--</p>
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第4页</div>
修改报告样式
2025-03-17 16:43:28 +08:00
</div>
<!-- 超声检查报告 -->
<div class="report-item ultrasound-exam">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>超声检查报告</span>
<span class="report-number">填充值</span>
</div>
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<div class="report-content">
<!-- 屏幕查看时显示PDF -->
<div class="screen-only">
<iframe src=""></iframe>
</div>
<!-- 打印时显示渲染的PDF -->
<div class="print-only pdf-container" data-pdf-url="">
<div class="pdf-loading">正在准备PDF预览...</div>
<!-- 添加图片容器，用于存放渲染后的图片 -->
<div class="pdf-image-container" style="display:none;"></div>
</div>
</div>
<div class="report-summary">
<p>
<strong>【所见】</strong>
<br>--
</p>
<p>
<strong>【所得】</strong>
<br>--
</p>
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第5页</div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
<!-- 尿常规检查报告 -->
<div class="report-item">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>尿常规检查报告</span>
<span class="report-number">填充值</span>
</div>
</div>
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="report-content">
<!-- 屏幕查看时显示PDF -->
<div class="screen-only">
样式修改
2025-03-17 14:54:53 +08:00
<iframe src=""></iframe>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<!-- 打印时显示渲染的PDF -->
样式修改
2025-03-17 14:54:53 +08:00
<div class="print-only pdf-container" data-pdf-url="">
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="pdf-loading">正在准备PDF预览...</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<!-- 添加图片容器 -->
<div class="pdf-image-container" style="display:none;"></div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
</div>
<div class="report-summary">
<h4>检验科小结：</h4>
样式修改
2025-03-17 14:54:53 +08:00
<p>--</p>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第6页</div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
<!-- 生化检查报告 -->
<div class="report-item">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>生化检查报告</span>
<span class="report-number">填充值</span>
</div>
</div>
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="report-content">
<!-- 屏幕查看时显示PDF -->
<div class="screen-only">
修改报告样式
2025-03-17 16:43:28 +08:00
<iframe src="" +#toolbar=0&navpanes=0&view=Fit></iframe>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<!-- 打印时显示渲染的PDF -->
样式修改
2025-03-17 14:54:53 +08:00
<div class="print-only pdf-container" data-pdf-url="">
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="pdf-loading">正在准备PDF预览...</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<!-- 添加图片容器 -->
<div class="pdf-image-container" style="display:none;"></div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
</div>
<div class="report-summary">
<h4>检验科小结：</h4>
样式修改
2025-03-17 14:54:53 +08:00
<p>--</p>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第7页</div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
<!-- 血常规检查报告 -->
<div class="report-item">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>血常规检查报告</span>
<span class="report-number">填充值</span>
</div>
</div>
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="report-content">
<!-- 屏幕查看时显示PDF -->
<div class="screen-only">
样式修改
2025-03-17 14:54:53 +08:00
<iframe src=""></iframe>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<!-- 打印时显示渲染的PDF -->
样式修改
2025-03-17 14:54:53 +08:00
<div class="print-only pdf-container" data-pdf-url="">
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="pdf-loading">正在准备PDF预览...</div>
修改报告样式
2025-03-17 16:43:28 +08:00
<!-- 添加图片容器 -->
<div class="pdf-image-container" style="display:none;"></div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
</div>
<div class="report-summary">
<h4>检验科小结：</h4>
样式修改
2025-03-17 14:54:53 +08:00
<p>--</p>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第8页</div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
<!-- 心电图检查报告 -->
<div class="report-item">
修改报告
2025-03-17 18:02:47 +08:00
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>心电图检查报告</span>
<span class="report-number">填充值</span>
</div>
</div>
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="report-content">
修改报告样式
2025-03-17 16:43:28 +08:00
<img src="" alt="心电图检查">
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
<div class="report-summary">
<p><strong>【所见】</strong>
修改报告样式
2025-03-17 16:43:28 +08:00
<br>--
修改打印报告
2025-03-17 10:18:30 +08:00
</p>
<p><strong>【所得】</strong>
修改报告样式
2025-03-17 16:43:28 +08:00
<br>--
</p>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
样式修改
2025-03-17 17:16:02 +08:00
<div class="report-footer">
修改报告
2025-03-17 18:02:47 +08:00
<p class="report-footer-text">定期体检，尊享健康</p>
样式修改
2025-03-17 17:16:02 +08:00
</div>
<!-- 添加页码 -->
修改报告样式
2025-03-18 11:08:26 +08:00
<div class="page-number">第9页</div>
</div>
<!-- 中医体质辨识 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>中医体质辨识</span>
<span>填充值</span>
</div>
</div>
<table class="constitution-table" id="constitution-result" style="margin: 10px auto 30px;">
<tr>
<td width="50%" style="text-align: center;">体质辨识结果</td>
<td width="50%" class="constitution-value" style="text-align: center;">--</td>
</tr>
</table>
<div class="report-footer">
<p class="report-footer-text">定期体检，尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">第10页</div>
修改打印报告
2025-03-17 10:18:30 +08:00
</div>
</div>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
<!-- 添加PDF渲染脚本 -->
<script>
修改报告样式
2025-03-17 16:43:28 +08:00
// 设置PDF.js worker
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
// 页面加载完成后立即开始预渲染所有PDF为图片
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
preRenderAllPDFs();
}, 1000);
});
// 预渲染所有PDF为图片
async function preRenderAllPDFs() {
const containers = document.querySelectorAll('.pdf-container');
for (const container of containers) {
const pdfUrl = container.getAttribute('data-pdf-url');
if (pdfUrl) {
try {
await renderPDFAsImage(pdfUrl, container);
} catch (error) {
console.error('预渲染PDF失败:', error);
showPDFError(container, pdfUrl);
}
修改打印报告
2025-03-17 10:18:30 +08:00
}
}
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
}
修改报告样式
2025-03-17 16:43:28 +08:00
// 将PDF渲染为图片 - 完全重写
async function renderPDFAsImage(url, container) {
try {
const loadingElem = container.querySelector('.pdf-loading');
const imageContainer = container.querySelector('.pdf-image-container');
// 加载PDF
const loadingTask = pdfjsLib.getDocument({
url: url,
withCredentials: false,
cMapUrl: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/cmaps/',
cMapPacked: true
});
const pdf = await loadingTask.promise;
// 只渲染第一页
const page = await pdf.getPage(1);
// 检查是否为超声检查报告
let scale = 1.5;
// 查找最近的report-item父元素，检查是否有ultrasound-exam类
const reportItem = container.closest('.report-item');
if (reportItem && reportItem.classList.contains('ultrasound-exam')) {
// 超声检查报告使用更大的缩放比例
scale = 3.0;
}
const viewport = page.getViewport({ scale: scale });
// 创建canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染PDF页面到canvas
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
// 裁剪canvas - 移除底部多余空白
// 这里我们尝试自动检测内容区域，避免显示多余的空白
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 从底部向上扫描，找到最后一行非空白像素
let bottomContentLine = canvas.height - 1;
let foundContent = false;
// 向上扫描最多200像素，寻找内容
for (let y = canvas.height - 1; y > canvas.height - 200 && !foundContent; y--) {
for (let x = 0; x < canvas.width; x++) {
const idx = (y * canvas.width + x) * 4;
// 检查像素是否不是白色（简单判断）
if (data[idx] < 240 || data[idx + 1] < 240 || data[idx + 2] < 240) {
bottomContentLine = y + 20; // 添加一些边距
foundContent = true;
break;
}
修改打印报告
2025-03-17 10:18:30 +08:00
}
}
修改报告样式
2025-03-17 16:43:28 +08:00
// 创建新的canvas，只包含内容部分
const newCanvas = document.createElement('canvas');
newCanvas.width = canvas.width;
newCanvas.height = Math.min(bottomContentLine + 1, canvas.height);
const newContext = newCanvas.getContext('2d');
// 将原canvas的内容复制到新canvas
newContext.drawImage(
canvas,
0, 0, canvas.width, newCanvas.height,
0, 0, newCanvas.width, newCanvas.height
);
// 将新canvas转换为图片
const imgData = newCanvas.toDataURL('image/png');
const img = document.createElement('img');
img.src = imgData;
img.alt = 'PDF预览';
// 添加页码信息
const pageInfo = document.createElement('p');
// pageInfo.textContent = `第1页，共${pdf.numPages}页`;
// pageInfo.className = 'pdf-page-info';
// 清空并添加图片
imageContainer.innerHTML = '';
imageContainer.appendChild(img);
imageContainer.appendChild(pageInfo);
// 隐藏加载提示，显示图片
if (loadingElem) loadingElem.style.display = 'none';
imageContainer.style.display = 'block';
return true;
} catch (error) {
console.error('渲染PDF为图片失败:', error);
throw error;
修改打印报告
2025-03-17 10:18:30 +08:00
}
修改报告样式
2025-03-17 16:43:28 +08:00
}
// 显示PDF错误信息
function showPDFError(container, url) {
const loadingElem = container.querySelector('.pdf-loading');
修改打印报告
2025-03-17 10:18:30 +08:00
if (loadingElem) loadingElem.style.display = 'none';
修改报告样式
2025-03-17 16:43:28 +08:00
const imageContainer = container.querySelector('.pdf-image-container');
imageContainer.innerHTML = `
修改打印报告
2025-03-17 10:18:30 +08:00
<div class="pdf-error">
<p>无法加载PDF预览</p>
<p>请访问以下链接查看完整报告：</p>
<p>${url}</p>
</div>
`;
修改报告样式
2025-03-17 16:43:28 +08:00
imageContainer.style.display = 'block';
}
// 打印前事件处理
window.addEventListener('beforeprint', () => {
// 显示所有打印容器
document.querySelectorAll('.print-only').forEach(el => {
el.style.display = 'block';
});
// 检查是否所有PDF都已渲染为图片
const containers = document.querySelectorAll('.pdf-container');
let allRendered = true;
containers.forEach(container => {
const imageContainer = container.querySelector('.pdf-image-container');
if (imageContainer.style.display !== 'block') {
修改报告首页样式
2025-03-19 14:52:42 +08:00
allRendered = false;
修改报告样式
2025-03-17 16:43:28 +08:00
}
});
if (!allRendered) {
preRenderAllPDFs().catch(error => {
console.error('打印前渲染失败:', error);
});
修改打印报告
2025-03-17 10:18:30 +08:00
}
});
</script>
</body>
修改报告样式
2025-03-17 16:43:28 +08:00
修改打印报告
2025-03-17 10:18:30 +08:00
</html>
Reference in New Issue Copy Permalink