如何用JavaScript/jQuery生成带表头CSV并导出HTML标签对应内容

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML转CSV</title>
  <style>
    .badge { padding: 2px 6px; border-radius: 4px; }
    .badge-success { background-color: #28a745; color: white; }
  </style>
</head>
<body>
  <!-- 示例数据HTML -->
  <div class="data-item">
    <div class="cat">Tom</div>
    <div class="dog"><span class="badge badge-success">Buddy</span></div>
    <div class="bird">Tweety</div>
  </div>
  <div class="data-item">
    <div class="cat">Garfield</div>
    <div class="bird">Woody</div>
  </div>
  <div class="data-item">
    <div class="dog"><span class="badge">Max</span></div>
    <div class="bird">Polly</div>
  </div>

  <!-- 下载按钮 -->
  <button id="downloadCsv">下载CSV文件</button>

  <script>
    document.getElementById('downloadCsv').addEventListener('click', function() {
      // 定义CSV表头
      const headers = ['CAT', 'DOG', 'BIRD'];
      // 获取所有数据项
      const items = document.querySelectorAll('.data-item');
      const rows = [headers.join(',')];

      // 遍历处理每个数据项
      items.forEach(item => {
        const row = [];
        // 处理CAT列
        const catEl = item.querySelector('.cat');
        row.push(catEl ? `"${catEl.textContent.trim()}"` : '"-"');
        // 处理DOG列
        const dogSpan = item.querySelector('.dog span');
        if (dogSpan) {
          if (dogSpan.classList.contains('badge-success')) {
            row.push('"success"');
          } else {
            row.push(`"${dogSpan.textContent.trim()}"`);
          }
        } else {
          row.push('"-"');
        }
        // 处理BIRD列
        const birdEl = item.querySelector('.bird');
        row.push(birdEl ? `"${birdEl.textContent.trim()}"` : '"-"');
        
        rows.push(row.join(','));
      });

      // 生成CSV内容
      const csvContent = rows.join('\n');
      // 创建下载链接并触发下载
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'data.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

功能说明 #

• 表头与列映射：固定使用CAT、DOG、BIRD作为CSV表头，确保输出格式统一
• DOG列特殊处理：当对应<span>带有badge-success类时，CSV中该列直接填入success，否则提取span文本内容
• 缺失列填充：任意数据项中缺少对应列的元素时，自动填入-
• CSV格式兼容：所有字段用双引号包裹，避免内容包含逗号时导致列错位问题
• 下载功能：点击按钮后自动生成CSV文件并触发浏览器下载，无需后端支持

预期CSV输出 #

CAT,DOG,BIRD
"Tom","success","Tweety"
"Garfield","-","Woody"
"-","Max","Polly"

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