如何实现批量导入用户信息并批量生成课程证书？

核心逻辑调整 #

要实现批量生成，核心是遍历用户列表，为每个用户独立执行证书生成流程，打破原代码仅处理单个用户数据的限制。

具体修改步骤 #

1. 统一用户数据为数组格式 #

无论是手动录入多用户信息，还是导入JSON文件，都要将数据存储为数组结构：

• 手动录入：新增“添加用户”按钮，将每个用户的姓名、学号等信息存入users数组
• JSON导入：要求导入的JSON必须是数组格式，示例如下：

  [
    {"name": "张三", "studentId": "2023001"},
    {"name": "李四", "studentId": "2023002"}
  ]
  

2. 重构证书生成函数 #

将原单个证书生成逻辑封装为可复用函数，接收单个用户信息、课程信息作为参数：

// 封装单个证书生成逻辑
function generateSingleCertificate(user, courseName, courseCode) {
  // 替换原代码中的用户信息为传入的user属性
  // 示例：填充证书模板、生成画布/PDF等操作
  const certificateTemplate = `
    --- 结业证书 ---
    课程名称：${courseName}
    课程代码：${courseCode}
    学员姓名：${user.name}
    学员学号：${user.studentId}
    ----------------
  `;
  // 为每个证书生成唯一文件名，避免覆盖
  saveCertificate(certificateTemplate, `${user.name}_${courseName}_证书.pdf`);
}

// 证书保存/下载辅助函数
function saveCertificate(content, filename) {
  // 实现文件下载逻辑：生成Blob、创建a标签触发下载
  const blob = new Blob([content], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

3. 添加批量生成触发逻辑 #

新增“批量生成证书”按钮，点击后遍历用户数组逐个生成：

// 批量生成按钮点击事件
document.getElementById('batch-generate-btn').addEventListener('click', () => {
  const courseName = document.getElementById('course-name').value.trim();
  const courseCode = document.getElementById('course-code').value.trim();
  const users = window.userDataList; // 假设已存储的用户数组

  if (!users || users.length === 0) {
    alert('请先导入或添加用户信息');
    return;
  }
  if (!courseName || !courseCode) {
    alert('请填写完整的课程信息');
    return;
  }

  // 遍历所有用户生成证书
  users.forEach(user => {
    generateSingleCertificate(user, courseName, courseCode);
  });
});

关键注意事项 #

• 文件名唯一性：用用户姓名/学号+课程名组合命名，避免文件互相覆盖
• 错误隔离：遍历过程中可添加try-catch，单个用户生成失败不中断整个批量流程
• 性能优化：若用户量超过50，可添加分批延迟处理，避免浏览器卡顿

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