如何通过CLI执行本地HTML中JavaScript并保存渲染后的HTML文件

问题分析 #

你之前尝试的Chrome Headless --dump-dom选项、CutyCapt、wkhtmltopdf等工具，要么返回原始未执行JS的HTML，要么仅支持导出图片/PDF，无法满足保存JS执行后渲染完成的DOM的需求。以下是两种可行的解决方法：

方法一：使用Puppeteer编写命令行脚本（推荐） #

Puppeteer是Chrome官方的Node.js自动化工具，能精准控制浏览器加载、等待JS执行，并获取渲染后的完整HTML。

步骤： #

1. 先安装Node.js和Puppeteer：

   npm install puppeteer
   

2. 创建渲染脚本（比如命名为render-html.js）：

   const puppeteer = require('puppeteer');
   const fs = require('fs');
   const path = require('path');
   
   (async () => {
     // 启动无头Chrome
     const browser = await puppeteer.launch({
       headless: 'new',
       args: [
         '--hide-scrollbars',
         '--disable-translate',
         '--disable-popup-blocking',
         '--disable-infobars',
         '--ignore-certificate-errors',
         '--autoplay-policy=no-user-gesture-required',
         '--disable-gpu'
       ]
     });
     const page = await browser.newPage();
     // 加载本地HTML文件（自动转换为file://协议）
     const inputPath = path.resolve(process.argv[2]);
     await page.goto(`file://${inputPath}`, {
       waitUntil: 'networkidle2', // 等待网络请求全部完成
       timeout: 30000 // 超时时间，可根据需求调整
     });
     // 额外等待时间确保动态内容渲染完成（可选，根据JS执行时长调整）
     await page.waitForTimeout(10000);
     // 获取渲染后的完整HTML内容
     const renderedHtml = await page.content();
     // 写入目标文件
     fs.writeFileSync(process.argv[3], renderedHtml, 'utf8');
     // 关闭浏览器
     await browser.close();
   })();
   

3. 命令行执行脚本：

   node render-html.js "someHTML_with_CSS_AND_JAVASCRIPT.html" "final.html"
   

4. 在PHP自动化脚本中，可通过exec()或shell_exec()调用上述命令：

   exec('node /path/to/render-html.js "/path/to/input.html" "/path/to/output.html"');
   

方法二：直接调用Chrome DevTools Protocol（纯命令行） #

无需安装Node.js，通过Chrome的远程调试接口直接控制浏览器，获取渲染后的DOM。需要依赖curl和jq工具（用于JSON解析）。

步骤： #

1. 启动无头Chrome并开启远程调试：

   google-chrome --headless=new --remote-debugging-port=9222 --disable-gpu &
   

2. 创建新页面并获取页面ID：

   PAGE_ID=$(curl -s http://localhost:9222/json/new | jq -r '.id')
   

3. 加载本地HTML文件：

   curl -X POST -H "Content-Type: application/json" \
     -d '{"method":"Page.navigate","params":{"url":"file:///absolute/path/to/someHTML_with_CSS_AND_JAVASCRIPT.html"}}' \
     http://localhost:9222/json/$PAGE_ID
   

4. 等待JS执行和内容渲染（根据实际情况调整等待时间）：

   sleep 10
   

5. 获取渲染后的完整HTML并保存：

   curl -X POST -H "Content-Type: application/json" \
     -d '{"method":"DOM.getDocument","params":{"depth":-1}}' \
     http://localhost:9222/json/$PAGE_ID | jq -r '.result.root.children[0].outerHTML' > final.html
   

6. 关闭Chrome页面和进程：

   curl -X POST http://localhost:9222/json/$PAGE_ID/close
   pkill -f "google-chrome --headless=new --remote-debugging-port=9222"
   

补充说明 #

Chrome的--dump-dom选项本质是读取页面的原始HTML文档，不会等待JS执行后的DOM更新，即使添加--virtual-time-budget也无法改变这一逻辑，因此无法满足需求。

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