使用Puppeteer抓取表头与数据表格的技术问询

推荐的数据格式 #

用数组对象格式，每个元素对应一行数据，键是表头文本，值是该行对应单元格的内容。示例：

[
  { "姓名": "张三", "年龄": "25", "城市": "北京" },
  { "姓名": "李四", "年龄": "30", "城市": "上海" }
]

这种格式天然支持过滤（filter）、排序（sort）、聚合计算（比如reduce统计），也能直接转成CSV、Excel或者生成新HTML表格，复用性拉满。

具体实现代码 #

下面是可直接运行的完整代码，重点注释了$$eval的核心用法：

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器，new模式是无头模式，需要可视化就设为false
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 替换成你的目标网页地址
  await page.goto('目标网页URL', { waitUntil: 'networkidle2' });

  // 1. 抓取表头文本
  const headers = await page.$$eval('.tr > div', (cells) => {
    // cells是浏览器上下文里匹配到的表头单元格数组
    return cells.map(cell => cell.textContent.trim());
  });

  // 2. 抓取所有数据行并映射为对象
  const rows = await page.$$eval('.tr.mytarget', (rowElements, headers) => {
    // 注意：第二个参数headers是从Node.js环境传入浏览器上下文的序列化数据
    return rowElements.map(row => {
      // 提取当前行的所有单元格文本
      const cellTexts = Array.from(row.querySelectorAll('div')).map(cell => cell.textContent.trim());
      // 把单元格和表头对应，生成行对象
      const rowObj = {};
      headers.forEach((header, index) => {
        // 兼容表头和单元格数量不匹配的情况
        if (cellTexts[index]) rowObj[header] = cellTexts[index];
      });
      return rowObj;
    });
  }, headers); // 这里的headers是传给浏览器上下文函数的参数

  // 输出结果，也可以写入文件或做后续处理
  console.log('抓取到的数据：', rows);

  await browser.close();
})();

关键API说明 #

• $$eval(selector, pageFunction, ...args) 是Puppeteer批量处理多元素的核心：
  1. 第一个参数是CSS选择器，匹配页面上的目标元素组
  2. 第二个参数是在浏览器环境运行的函数，无法直接访问Node.js变量，必须通过第三个及以后的参数传入
  3. 函数返回值会被Puppeteer序列化后带回Node.js，所以不能返回DOM元素，只能返回文本、数组、对象这类可序列化数据
• waitUntil: 'networkidle2' 确保页面动态资源加载完成，避免因元素未渲染导致抓取失败

后续处理示例 #

拿到rows数组后，可轻松完成这些操作：

• 过滤年龄大于25的行：const filtered = rows.filter(item => parseInt(item.年龄) > 25)
• 统计年龄总和：const totalAge = rows.reduce((sum, item) => sum + parseInt(item.年龄), 0)
• 生成新HTML表格：把数组映射为<tr><td>...</td></tr>字符串，拼接进表格标签即可

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