如何实现表单data grid及批量打印指定员工组薪资单功能？

我来帮你拆解这个需求的实现步骤，分前端布局、后端数据获取、批量打印逻辑三个核心部分，每个部分都给你具体的思路和代码示例：

首先你需要在页面上放置一个Data Grid（用来展示薪资数据，可选）和两个打印按钮。这里用原生HTML/JS举例，如果你用框架（比如Vue/React/ASP.NET Web Forms），思路是一致的：

<!-- 可选：展示薪资数据的Data Grid容器 -->
<div id="salaryGridContainer">
  <table id="salaryGrid" border="1" cellpadding="8" cellspacing="0">
    <thead>
      <tr>
        <th>员工ID</th>
        <th>姓名</th>
        <th>部门</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- 打印按钮组 -->
<div style="margin: 1rem 0;">
  <button id="printSupportBtn">打印支持人员薪资单</button>
  <button id="printAllBtn" style="margin-left: 1rem;">打印所有员工薪资单</button>
</div>

<!-- 隐藏的打印模板容器（用来渲染单条记录的打印视图） -->
<div id="printTemplate" style="display: none;"></div>

你需要写一个后端接口，根据前端传入的员工组参数，从SQL数据库查询对应的薪资记录，然后返回JSON格式的数据。这里用Node.js/Express + MySQL举例，其他后端语言（比如C#/Java/PHP）逻辑完全一致：

const express = require('express');
const mysql = require('mysql');
const app = express();

// 配置数据库连接（替换成你的数据库信息）
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_db_username',
  password: 'your_db_password',
  database: 'your_db_name'
});

db.connect(err => {
  if (err) throw err;
  console.log('Connected to SQL Database');
});

// 接口：获取指定员工组的薪资数据
app.get('/api/salaries', (req, res) => {
  const employeeGroup = req.query.group; // 前端传入的参数：'support' 或 'all'
  let query = 'SELECT employee_id, name, department, salary FROM employee_salaries';

  // 根据员工组过滤数据
  if (employeeGroup === 'support') {
    query += ' WHERE department = "Support"';
  }

  db.query(query, (err, results) => {
    if (err) {
      return res.status(500).json({ error: 'Failed to fetch data' });
    }
    res.json(results);
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

这部分是关键，要实现自动逐个打印每条记录，核心思路是：

• 前端调用后端接口拿到数据后，遍历每条记录
• 把单条记录渲染成独立的网格视图（放在隐藏容器里）
• 触发浏览器打印功能，等待当前打印完成后，再处理下一条记录

下面是前端JS的实现代码：

// 绑定按钮点击事件
document.getElementById('printSupportBtn').addEventListener('click', () => handlePrint('support'));
document.getElementById('printAllBtn').addEventListener('click', () => handlePrint('all'));

// 打印处理函数
async function handlePrint(employeeGroup) {
  try {
    // 1. 从后端获取数据
    const response = await fetch(`/api/salaries?group=${employeeGroup}`);
    const salaries = await response.json();

    if (salaries.length === 0) {
      alert('没有找到对应员工的薪资记录');
      return;
    }

    // 2. 遍历每条记录，逐个打印
    for (const salary of salaries) {
      // 渲染单条薪资记录的打印视图
      renderPrintTemplate(salary);
      
      // 触发打印，等待打印完成后再继续下一条
      await waitForPrintCompletion();
    }

    alert('所有薪资单打印完成');
  } catch (err) {
    console.error('打印出错:', err);
    alert('打印过程中出现错误，请重试');
  }
}

// 渲染打印模板
function renderPrintTemplate(salary) {
  const template = document.getElementById('printTemplate');
  template.innerHTML = `
    <style>
      @media print {
        body { margin: 2cm; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #000; padding: 0.5rem; text-align: left; }
        th { background-color: #f0f0f0; }
      }
    </style>
    <table>
      <tr><th>员工ID</th><td>${salary.employee_id}</td></tr>
      <tr><th>姓名</th><td>${salary.name}</td></tr>
      <tr><th>部门</th><td>${salary.department}</td></tr>
      <tr><th>薪资</th><td>$${salary.salary.toFixed(2)}</td></tr>
    </table>
  `;
}

// 等待打印完成的辅助函数
function waitForPrintCompletion() {
  return new Promise(resolve => {
    // 监听浏览器的打印完成事件（优先）
    window.addEventListener('afterprint', resolve, { once: true });
    // 兜底定时器：防止某些浏览器不支持afterprint事件
    setTimeout(resolve, 1000);
  });
}

• 打印样式适配：用@media print专门定义打印时的样式，确保打印出来的格式美观，去掉页面上不需要的元素（比如按钮、导航栏）。
• 异步打印可靠性：不同浏览器对afterprint事件的支持略有差异，加个定时器兜底可以避免卡住。
• 大数据量处理：如果员工数量很多（比如几百条），建议分批打印或者给用户提示，避免浏览器因为连续打印出现性能问题。
• 权限验证：后端接口要加权限控制，确保只有授权用户能访问薪资数据，避免数据泄露。

内容的提问来源于stack exchange，提问作者sorath peetamber