本文介绍在 codeigniter 3 框架中，通过 css 媒体查询（@media print）控制 html 表格仅在打印预览时显示，无需后端 php 逻辑干预，简洁高效、兼容性强。
本文介绍在 codeigniter 3 框架中，通过 css 媒体查询（@media print）控制 html 表格仅在打印预览时显示，无需后端 php 逻辑干预，简洁高效、兼容性强。
在 CodeIgniter 3 应用中，若需为数据表格提供专属打印预览视图（例如报表导出前的所见即所得预览），最佳实践并非新建控制器方法或跳转至独立打印页，而是利用浏览器原生的 window.print() 结合 CSS 打印媒体查询实现优雅控制。
核心原理是：默认隐藏表格元素，仅在用户触发打印（如按 Ctrl+P 或调用 print()）时，通过 @media print 规则将其设为可见。这样既保持页面正常浏览体验，又确保打印内容干净聚焦。
✅ 实现步骤如下：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
为表格添加语义化类名（推荐使用 .print-table 或 .html-table）
在视图文件（如 application/views/report_view.php）中：
<button onclick="window.print()" class="btn btn-default">打印预览</button>
<table class="print-table table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>注册时间</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td><?= esc($user->name) ?></td>
<td><?= esc($user->email) ?></td>
<td><?= date('Y-m-d H:i', strtotime($user->created_at)) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>- 添加打印专用 CSS（建议置于 <head> 内或独立 CSS 文件中）
/* 默认状态下隐藏打印表格（可选：也可设为 visible，默认显示） */
.print-table {
display: none;
}
/* 仅在打印预览/输出时显示 */
@media print {
.print-table {
display: table !important;
width: 100%;
border-collapse: collapse;
}
.print-table th,
.print-table td {
border: 1px solid #333;
padding: 6px 8px;
font-size: 12px;
}
.print-table th {
background-color: #f2f2f2;
}
/* 隐藏非打印元素（如按钮、导航栏等） */
body * {
visibility: hidden;
}
.print-table, .print-table * {
visibility: visible;
}
.print-table {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}? 关键提示：
立即学习“前端免费学习笔记（深入）”；
- 使用 visibility: hidden + visibility: visible 组合比单纯 display: none/block 更可靠，可避免因父容器隐藏导致子元素无法显示的问题；
- 添加 !important 确保打印样式优先级高于框架默认样式（如 Bootstrap）；
- 打印时建议移除背景色与阴影（部分浏览器默认禁用），如需保留，需在浏览器设置中启用“打印背景图形”；
- CodeIgniter 本身不参与打印逻辑——该方案纯前端实现，完全兼容其 MVC 架构，无需修改控制器或模型。
最后，在打印窗口关闭后，页面自动恢复常规视图，用户体验无缝流畅。此方法轻量、跨浏览器支持良好（Chrome、Firefox、Edge 均已验证），是 CodeIgniter 3 项目中实现专业打印预览的推荐方案。
