如何从CSS Grid布局提取值数组或行数组以转换为CSV？

步骤1：提取Grid数据为嵌套数组 #

你的Grid布局是5列，我们可以通过JavaScript先抓取所有单元格的文本内容，再按列数拆分出每一行的数组，最终得到行嵌套的二维数组。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-table {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin: 16px;
    }
    .grid-table div {
      padding: 8px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="grid-table">
    <div>head1</div>
    <div>head2</div>
    <div>head3</div>
    <div>head4</div>
    <div>head5</div>
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
    <div>item6</div>
    <div>item7</div>
    <div>item8</div>
    <div>item9</div>
  </div>
  <button onclick="exportGridToCSV()">导出为CSV</button>

  <script>
    function exportGridToCSV() {
      // 获取Grid容器
      const grid = document.querySelector('.grid-table');
      // 获取所有单元格文本
      const cellTexts = Array.from(grid.children).map(cell => cell.textContent.trim());
      // 动态获取Grid列数（从计算样式读取，无需硬编码）
      const columnCount = parseInt(getComputedStyle(grid).gridTemplateColumns.split(' ').length);
      
      // 拆分单元格为行数组（嵌套数组）
      const rows = [];
      for (let i = 0; i < cellTexts.length; i += columnCount) {
        rows.push(cellTexts.slice(i, i + columnCount));
      }

      // 把嵌套数组转成标准CSV格式
      const csvContent = rows.map(row => 
        row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(',')
      ).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', 'grid-data.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  </script>
</body>
</html>

关键细节说明 #

• 动态列数适配：通过getComputedStyle读取Grid的实际列数，后续修改Grid布局列数时无需修改JS代码
• CSV格式兼容：给每个单元格内容添加双引号，同时转义内容中的双引号，避免CSV解析错误
• 残缺行处理：如果单元格总数不是列数的整数倍，slice方法会自动保留最后一行的剩余元素，不会出现报错

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