合同扫描页应采用「文档容器+元信息+工具栏」三层语义结构：外层container控宽，PDF用iframe加载并精简参数，元数据置aside用list-group，工具栏用navbar固定；打印时需d-print-none隐藏非内容元素，并确保PDF文件兼容性。
Bootstrap 本身不提供合同档案扫描页的专用组件，它只是 CSS 框架；直接用它“制作扫描页”会走偏——真正需要的是：结构化展示 PDF/图像扫描件 + 元数据 + 操作入口，而 Bootstrap 只负责让这些内容响应式、易读、可交互。
怎么组织扫描页的 DOM 结构才合理
合同扫描页本质是「文档容器 + 元信息 + 工具栏」三层结构，不是堆砌 card 或 accordion 就完事。关键在于语义清晰、打印友好、移动端可操作：
- 外层用
保证宽度可控，避免全屏拉伸导致 PDF 缩放失真 - 扫描内容区优先用
加载 PDF（src="contract.pdf#toolbar=0&navpanes=0"去掉 PDF 阅读器冗余控件），比 - 元数据（合同编号、签订日期、扫描时间等）放在
，用list-group而非table—— 表格在小屏上横向溢出难处理 - 顶部工具栏固定用
，按钮统一用btn-sm，防止在平板上误触
PDF 扫描件在 iframe 中不显示或报错怎么办
常见现象是空白、404、或浏览器提示“无法加载嵌入内容”，根本原因不是 Bootstrap，而是资源路径、MIME 类型或跨域策略：
- 确保 PDF 文件放在同源静态目录下（如
/uploads/contracts/2024-001.pdf），不要用绝对 URL 指向外部域名（会触发 CORS） - 后端需返回正确的
Content-Type: application/pdf，Nginx 示例配置：location ~ \.pdf$ { add_header Content-Type application/pdf; } - Firefox 对
iframe加载 PDF 更敏感，加sandbox="allow-scripts allow-same-origin"属性可解部分白屏 - 别用
替代—— Safari 对object的 PDF 渲染支持不稳定，且无法用 JS 控制缩放
如何让扫描页支持打印归档（而非只看）
后台系统常被忽略的一点：用户点击「打印」时，不该打出导航栏、侧边栏和按钮，只该输出扫描件+元数据。Bootstrap 的 print 工具类必须配合自定义样式：
- 给工具栏加
class="d-none d-print-block"是错的 —— 这会让打印时完全空白；正确做法是用class="d-print-none"隐藏不需要打印的元素 - PDF
默认不可打印，需额外加onload="this.contentWindow.focus();"并绑定打印按钮调用this.contentWindow.print() - 元数据区域打印时建议转为
font-size: 12px; line-height: 1.4;，避免换行错乱；用@media print { .col-lg-3 { width: 100% !important; } }强制单列 - 如果合同是多页 JPG 扫描，别用轮播图（
carousel）—— 打印只会出当前页；改用垂直堆叠的
img { page-break-inside: avoid; }
最易被忽略的其实是 PDF 文件本身的兼容性：有些扫描 PDF 内嵌了专有字体或加密权限（如禁止打印），这时前端再怎么写 CSS 都无效。上线前务必用真实文件在 Chrome/Firefox/Edge 三端实测打印输出效果。
