如何在 CodeIgniter 3 中实现 HTML 表格的打印预览功能-php教程-PHP中文网

如何在 CodeIgniter 3 中实现 HTML 表格的打印预览功能

本文介绍在 codeigniter 3 框架中，通过 css 媒体查询（@media print）控制 html 表格仅在打印预览时显示，无需后端 php 逻辑干预，简洁高效、兼容性强。

本文介绍在 codeigniter 3 框架中，通过 css 媒体查询（@media print）控制 html 表格仅在打印预览时显示，无需后端 php 逻辑干预，简洁高效、兼容性强。

在 CodeIgniter 3 应用中，若需为数据表格提供专属打印预览视图（例如报表导出前的所见即所得预览），最佳实践并非新建控制器方法或跳转至独立打印页，而是利用浏览器原生的 window.print() 结合 CSS 打印媒体查询实现优雅控制。

核心原理是：默认隐藏表格元素，仅在用户触发打印（如按 Ctrl+P 或调用 print()）时，通过 @media print 规则将其设为可见。这样既保持页面正常浏览体验，又确保打印内容干净聚焦。

✅ 实现步骤如下：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

为表格添加语义化类名（推荐使用 .print-table 或 .html-table）
在视图文件（如 application/views/report_view.php）中：

<button onclick="window.print()" class="btn btn-default">打印预览</button>

姓名	邮箱	注册时间
= esc($user->name) ?>	= esc($user->email) ?>	= date('Y-m-d H:i', strtotime($user->created_at)) ?>

添加打印专用 CSS（建议置于内或独立 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 项目中实现专业打印预览的推荐方案。