.NET Core Web应用：数据库/表格数据自定义格式打印方案咨询

技术方案 #

直接用**CSS打印媒体查询（@media print）**配合原生JavaScript触发打印窗口，比DataTables内置打印更灵活，完全能满足你需要的页眉、页码、空白手写字段需求。

具体实现步骤 #

1. 构建打印专用HTML结构

在页面中新增一个隐藏的打印容器，专门存放要打印的内容，包含页眉（打印人信息、空白的comisioned字段）、数据库渲染的主体数据：

<!-- 打印触发按钮 -->
<button id="print-btn">打印文档</button>

<!-- 打印专用容器，默认隐藏 -->
<div id="print-container" style="display: none;">
  <!-- 页眉区域 -->
  <div class="print-header">
    <p>打印人：<span id="print-username"></span></p>
    <p>comisioned：<span class="blank-field">&nbsp;</span></p>
  </div>

  <!-- 主体数据区域 -->
  <div class="print-content">
    <!-- 这里渲染从数据库获取的表格数据 -->
    <table class="print-table">
      <thead>
        <tr>
          <th>字段1</th>
          <th>字段2</th>
          <!-- 其他表头 -->
        </tr>
      </thead>
      <tbody>
        <!-- 循环渲染数据库数据 -->
        @foreach(var item in Model.DataList)
        {
          <tr>
            <td>@item.Field1</td>
            <td>@item.Field2</td>
          </tr>
        }
      </tbody>
    </table>
  </div>
</div>

2. 编写打印专用CSS

通过@media print控制打印样式，设置A4页面、页眉固定、自动页码：

/* 全局样式 */
.blank-field {
  border-bottom: 1px solid #000;
  padding: 0 60px;
}

/* 打印媒体查询 */
@media print {
  /* 隐藏页面非打印内容 */
  body *:not(#print-container):not(#print-container *) {
    visibility: hidden;
  }

  /* 显示打印容器 */
  #print-container {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
  }

  /* 设置A4页面尺寸与边距 */
  @page {
    size: A4;
    margin: 2.5cm 2cm; /* 预留页眉、页码空间 */
  }

  /* 固定页眉在每页顶部 */
  .print-header {
    position: fixed;
    top: 0;
    width: calc(100% - 4cm); /* 减去左右边距 */
    margin-top: -2cm; /* 配合页边距调整位置 */
  }

  /* 自动生成页码（右上角） */
  @page {
    @top-right {
      content: "页码 " counter(page) " / " counter(pages);
      font-size: 12px;
    }
  }

  /* 避免表格行被分页截断 */
  .print-table tr {
    page-break-inside: avoid;
  }

  /* 隐藏打印按钮 */
  #print-btn {
    display: none;
  }
}

3. 用JS触发打印并填充信息

编写按钮点击事件，填充当前登录用户的打印人信息，然后触发系统打印窗口：

document.getElementById('print-btn').addEventListener('click', function() {
  // 从当前登录状态获取打印人名称（替换成你的实际逻辑）
  const currentUserName = '@User.Identity.Name';
  document.getElementById('print-username').textContent = currentUserName;

  // 触发Windows打印窗口
  window.print();
});

关键注意点 #

• comisioned字段用带下划线的空白span实现，避免用输入框，防止打印时出现多余边框。
• 测试时要在浏览器打印预览中查看效果，不同浏览器对@page的兼容性略有差异，可微调边距数值。
• 如果数据量较大，CSS的page-break-inside: avoid能避免表格行被分页截断，提升打印体验。

内容的提问来源于stack exchange，提问作者jakub podhaisky