如何从HTML表单获取输入值并生成自定义CSV文件供用户下载

核心实现步骤 #

• 监听导出按钮的点击事件，批量采集表单内所有用户填写的字段值
• 按照自定义规则拼接CSV内容，同步处理特殊字符避免格式错乱
• 将拼接完成的CSV内容转换为Blob对象，生成临时下载链接
• 触发浏览器下载行为，执行完成后自动清理临时资源

完整可运行代码示例 #

表单部分（和你现有加权平均分计算器逻辑兼容） #

<form id="scoreForm">
  <!-- 单条课程记录结构，可动态新增多行 -->
  <div class="course-item">
    <input type="text" name="courseName" placeholder="课程名称" required>
    <input type="number" name="credit" placeholder="学分" min="0" step="0.5" required>
    <input type="number" name="score" placeholder="成绩" min="0" max="100" required>
  </div>
  <div class="course-item">
    <input type="text" name="courseName" placeholder="课程名称" required>
    <input type="number" name="credit" placeholder="学分" min="0" step="0.5" required>
    <input type="number" name="score" placeholder="成绩" min="0" max="100" required>
  </div>
  <button type="button" id="addCourse">新增课程</button>
  <button type="button" id="exportCsv">导出成绩为CSV</button>
  <button type="submit">计算加权平均分</button>
</form>

导出逻辑JS代码 #

// CSV自定义配置项，所有格式调整都可以修改这里的参数
const CSV_CONFIG = {
  // 自定义表头：键对应表单字段名，值对应CSV里显示的表头文本，顺序和导出顺序一致
  headers: {
    courseName: '课程名称',
    credit: '学分',
    score: '最终成绩',
    remark: '备注'
  },
  // 自定义字段分隔符，默认逗号，可改为制表符\t等
  delimiter: ',',
  // 自定义导出文件名
  fileName: '加权成绩统计.csv'
}

// 处理CSV特殊字符的工具函数，避免字段内逗号、引号、换行破坏格式
function escapeCsvField(field) {
  if (field == null) return ''
  const str = String(field)
  if (str.includes(CSV_CONFIG.delimiter) || str.includes('"') || str.includes('\n')) {
    return `"${str.replace(/"/g, '""')}"`
  }
  return str
}

// 导出按钮点击事件绑定
document.getElementById('exportCsv').addEventListener('click', () => {
  // 1. 采集表单所有数据
  const courseList = document.querySelectorAll('#scoreForm .course-item')
  const exportData = []
  courseList.forEach(item => {
    exportData.push({
      courseName: item.querySelector('input[name="courseName"]').value,
      credit: item.querySelector('input[name="credit"]').value,
      score: item.querySelector('input[name="score"]').value,
      remark: '' // 自定义新增字段，可按需绑定其他表单值
    })
  })

  // 2. 按照配置拼接CSV内容
  const headerRow = Object.values(CSV_CONFIG.headers).join(CSV_CONFIG.delimiter)
  const dataRows = exportData.map(row => {
    return Object.keys(CSV_CONFIG.headers).map(key => escapeCsvField(row[key])).join(CSV_CONFIG.delimiter)
  })
  // 开头加\ufeff BOM头解决Excel打开中文乱码问题
  const csvContent = '\ufeff' + [headerRow, ...dataRows].join('\n')

  // 3. 触发浏览器下载
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const tempUrl = URL.createObjectURL(blob)
  const downloadLink = document.createElement('a')
  downloadLink.href = tempUrl
  downloadLink.download = CSV_CONFIG.fileName
  downloadLink.style.display = 'none'
  document.body.appendChild(downloadLink)
  downloadLink.click()
  // 清理临时资源
  document.body.removeChild(downloadLink)
  URL.revokeObjectURL(tempUrl)
})

格式自定义调整说明 #

• 调整表头/导出字段顺序：直接修改CSV_CONFIG.headers的键值对和排列顺序即可，无需改动其他逻辑
• 新增导出字段：先在CSV_CONFIG.headers里添加对应键和表头名，再在数据采集步骤给row对象赋值对应字段即可
• 修改分隔符：修改delimiter参数即可，例如改为\t可生成TSV格式文件
• 修改导出文件名：直接修改fileName参数即可

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