体检报告页用纯html+css即可，应使用语义化标签（如）结构化呈现数据，避免框架冗余；需规范打印样式、异常标识及响应式适配，导出pdf优先后端生成。
体检报告页用纯 HTML + CSS 就够了，不需要框架
绝大多数体检报告页本质是「结构化数据的静态呈现」，表格、分组标题、数值+参考范围对比、状态标识（如↑、↓、异常）——这些用语义化 HTML 标签（<section></section>、<table>、<code><dl></dl>）配合基础 CSS 就能清晰表达，强行套 React/Vue 反而增加加载延迟和维护成本。
常见错误现象：div 套 div 堆出“报告”，没用 <h2></h2> 区分检查大类（如「血常规」「肝功能」），导致屏幕阅读器无法导航、SEO 无意义、后期加打印样式困难。
- 用
<section></section>包裹每个检查项目组，<h3></h3>作组标题（如「血脂四项」） - 单个指标优先用
<dl> <dt>总胆固醇</dt> <dd>5.8 mmol/L <span class="abnormal">↑</span> </dd> </dl>，比表格更语义清晰 - 必须为异常值添加
class="abnormal"或data-status="high"，方便后续用 JS 高亮或导出筛选
表格只在多行同构数据时用，别滥用
「血常规」这种含十几项、每项都有「项目名｜结果｜单位｜参考范围｜状态」的列表，用 <table> 合理；但「一般检查」里的身高/体重/血压，3 行数据就起一个表格，反而让结构臃肿、移动端难适配。<p>性能影响：浏览器渲染表格需等待整行内容解析完才绘制，而 <code><dl></dl> 或 <div> 是流式布局，首屏更快。<ul><li>表格必须有 <code><thead> 和 <code><tbody>，<code><th> 要用 <code>scope="col" 明确关联列
<td>3.5–5.5</td>
<td>mmol/L</td>，避免正则匹配单位时出错overflow-x: auto 到 <table> 父容器，防止横向溢出<h3>打印样式必须单独写，否则医院打印机吐出半页</h3>
<p>用户点击「打印报告」后，常出现页眉页脚遮挡内容、分页截断表格、颜色背景被忽略导致异常值看不清——这些不是浏览器问题，是没写 <code>@media print。
兼容性注意：Chrome 和 Edge 对 print 媒体查询支持较好，但 Safari 会忽略部分 !important 声明，需实测。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 重置所有
margin/padding：@media print { * { margin:0; padding:0; } } - 强制显示异常标识：
.abnormal { color: #d32f2f !important; font-weight: bold; } - 隐藏非内容元素：
#header, .nav, .print-hide { display: none; } - 为表格加
page-break-inside: avoid，防止跨页断行
导出 PDF 不要用前端库硬生成
用户要的是「看起来和打印一致的 PDF」，不是「能编辑的 PDF」。用 jsPDF + html2canvas 渲染体检报告，会模糊文字、丢失表格边框、中文折行错乱，且生成耗时长（尤其带图表时）。
真正稳定的方案是后端生成（如 Python 的 weasyprint 或 Node 的 puppeteer），前端只需提供干净的、带 @media print 的 HTML 字符串。
- 前端给后端传参时，确保包含完整 DOM 结构，而非仅 JSON 数据（避免后端重复拼 HTML）
- 若必须前端导出，至少用
print()` 触发系统打印对话框，选「另存为 PDF」——这是最兼容的方式 - 禁用所有动画、过渡效果，
@media print { * { animation: none !important; } }
最容易被忽略的是「参考范围的动态渲染逻辑」：有些指标（如肌酐）参考值因性别年龄变化，前端若把范围写死在 HTML 里，下次规则调整就得发版；应该由后端返回带 range_low、range_high、unit 的字段，前端用模板安全插入。
