如何使用JavaScript在Node.js环境下读取完全加载的网页内容

问题原因分析 #

你当前拿到的页面内容不全，分为两种常见情况：

1. 如果目标是纯静态HTML页面：request库的回调触发时已经默认接收完完整响应体，内容不全通常是编码配置错误、服务端压缩未适配导致的。
2. 如果目标是JS动态渲染的页面（如Vue/React单页应用、内容由前端脚本生成的页面）：request库仅能获取初始静态HTML，不会执行页面内的JS逻辑，自然无法拿到动态生成的内容，这是绝大多数同类问题的诱因。

解决方案 #

方案1：适配纯静态页面请求

先完善request的配置项，验证静态内容是否能正常拉取：

const request = require('request');
request({
  url: 'http://mylocalurl.html',
  encoding: 'utf8', // 明确指定响应编码
  gzip: true // 适配服务端gzip压缩的响应
}, function (error, response, body) {
  if (error) {
    console.error('请求错误:', error);
    return;
  }
  console.log('响应状态码:', response.statusCode);
  console.log('响应体总长度:', body.length); // 可对比响应头content-length验证完整性
  console.log('页面内容:', body);
});

注意：request库已经正式停止维护，静态请求优先推荐使用axios或者Node 18+内置的fetch方法替代。

方案2：适配JS动态渲染的页面

需要使用支持无头浏览器的工具加载页面，等待JS执行完成后再提取内容，推荐使用puppeteer：

1. 先安装依赖：
   npm install puppeteer
2. 示例代码：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 跳转至目标页面，等待网络空闲2秒后判定加载完成，适配动态内容
  await page.goto('http://mylocalurl.html', {
    waitUntil: 'networkidle2',
    timeout: 30000
  });
  // 可选：如果需要等待特定元素渲染完成再获取内容，可添加以下代码
  // await page.waitForSelector('.target-element-class');

  // 获取渲染完成的完整HTML内容
  const fullPageHtml = await page.content();
  console.log('完整页面内容:', fullPageHtml);

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

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