如何模拟网页「另存为」操作获取完整渲染后的页面源代码

原因说明 #

你遇到的是典型的客户端动态渲染场景：服务端初始返回的HTML仅包含空的DOM容器，对应你看到的<div class="row5" info_abc></div>，页面加载完成后浏览器会执行页面内置的JS脚本，从服务端拉取数据后再填充到容器中，才会生成你在「检查元素」和「另存为」结果中看到的完整内容。
curl、wget这类工具默认只会请求服务端返回的原始HTML，没有JS执行环境，也不会等待后续的接口请求和DOM渲染，所以默认没法直接拿到完整的渲染后内容。 #

可行解决方案 #

1. 优先抓取数据接口（最便捷） #

打开Chrome开发者工具切换到「网络」面板，筛选XHR/Fetch类型的请求，刷新页面后逐个查看请求返回值，找到返回你需要的目标内容的接口，直接用curl请求该接口即可拿到结构化数据，比解析HTML效率更高。

2. 使用无头浏览器获取完整渲染HTML #

如果接口有加密、签名校验没法直接请求，可以用无头浏览器模拟浏览器的完整加载流程，等页面渲染完成后再导出完整HTML，结果和浏览器「另存为」完全一致。
常用工具包括Puppeteer(Node.js)、Playwright(多语言支持)、Selenium等，下方是Puppeteer的极简示例：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头Chrome
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 加载目标页面，等待网络空闲确保渲染完成
  await page.goto('替换为你的目标页面URL', { waitUntil: 'networkidle2' });
  // 导出完整渲染后的HTML
  const fullHtml = await page.content();
  console.log(fullHtml);
  await browser.close();
})();

3. 零代码命令行方案 #

如果你不想写代码，可以直接调用Chrome的命令行无头模式直接导出完整DOM：

chrome --headless=new --dump-dom 替换为你的目标页面URL > output.html

Windows环境下需要先进入Chrome的安装目录再执行该命令，执行完成后当前目录的output.html就是和浏览器另存为一致的完整源码。 #

关于curl/wget的补充说明 #

纯原生的curl、wget没有JS执行能力，没法直接实现需求。如果你的目标站点做了服务端渲染降级，或者你已经通过抓包拿到了所有动态请求的参数和鉴权信息，可以用curl模拟所有请求后自行拼接HTML，但复杂度远高于上述无头浏览器方案。

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