动态网页表格数据提取：无头浏览器与 JavaScript 评估的解决方案

2024-03-23 13:21:10

从动态生成内容的网页中提取表格数据：解决方法

简介

在当今的网络开发世界中，JavaScript 已成为动态生成内容的强大工具。虽然这对用户提供了无缝的体验，但对于想要从这些页面提取数据的网络抓取工具来说却构成了挑战。在本博客中，我们将探索如何使用无头浏览器和 JavaScript 评估来解决这个难题，从动态生成的网页中抓取表格数据。

了解问题

传统的网络抓取方法，如 Selenium 库和 Chrome 驱动程序，在处理动态生成的网页时会遇到困难。这是因为这些工具依赖于页面上的 DOM 元素，而动态生成的内容往往不会立即出现在 DOM 中。

解决方案：使用无头浏览器

无头浏览器，如 Puppeteer 或 Playwright，为解决这个问题提供了解决方案。这些浏览器可以在没有图形用户界面 (GUI) 的情况下运行，这提高了性能和效率。更重要的是，它们允许我们直接与网页上的 JavaScript 交互。

JavaScript 评估

通过使用无头浏览器中提供的 JavaScript 评估功能，我们可以直接获取动态生成的数据。通过 document.querySelectorAll 函数选择表格元素，然后使用 element.innerText 获取文本内容，我们可以提取所需的数据。

处理分页

如果网页包含多个页面，我们可以使用 evaluate 函数获取“下一页”按钮的元素，然后单击它来导航到下一个页面。重复此过程，直到抓取所有页面。

保存数据

一旦我们提取了表格数据，就可以将其转换为 CSV 格式并保存到文件中。Puppeteer 和 Playwright 库中提供了内置函数，可以轻松实现此操作。

代码示例

使用 Puppeteer 的代码示例如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com/dynamic-table');

  // Wait for all tables to be present
  await page.waitForSelector('table');

  // Get all tables
  const tables = await page.evaluate(() => Array.from(document.querySelectorAll('table'), table => table.innerText));

  // Convert to CSV
  const csvData = tables.join('\n');

  // Save to CSV file
  await page.evaluate((data) => {
    const blob = new Blob([data], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.csv';
    a.click();
    URL.revokeObjectURL(url);
  }, csvData);

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