如何让Headless Chrome等待Ajax完成后再打印为PDF

这个问题我之前也碰到过类似的情况，核心就是要让Headless Chrome等页面的异步请求完全结束后再触发打印操作。给你几个实用的解决方案：

方案一：用固定等待时间快速解决 #

最简单的方式是给Chrome加一个--virtual-time-budget参数，让它模拟等待指定时长后再执行打印。调整你的命令如下：

chrome --headless http://localhost:8080/banana/key --run-all-compositor-stages-before-draw --virtual-time-budget=5000 --print-to-pdf=C:\tmp\tmp.pdf

这里的5000是毫秒数，也就是让Chrome等待5秒。你可以根据页面Ajax请求的实际耗时调整这个数值，比如请求需要10秒就改成10000。这种方式适合快速验证问题，但缺点是如果请求时长不稳定，可能会出现等待不够或等待过长的情况。

方案二：用CDP脚本精准控制（推荐） #

如果想要更可靠的等待，建议用Chrome DevTools Protocol（CDP）的工具，比如官方的Puppeteer库来写个简单脚本，它能真正等待网络请求完成再打印。

先安装Puppeteer：

npm install puppeteer

然后写一个Node.js脚本：

const puppeteer = require('puppeteer');

(async () => {
  // 启动Headless Chrome
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 跳转到目标页面，等待网络空闲（500ms内无任何请求）
  await page.goto('http://localhost:8080/banana/key', { waitUntil: 'networkidle0' });
  
  // 如果页面有轮询请求，换成networkidle2（500ms内不超过2个请求）更合适
  // await page.goto('http://localhost:8080/banana/key', { waitUntil: 'networkidle2' });
  
  // 也可以等待某个Ajax渲染的元素出现，更精准
  // await page.waitForSelector('#ajax-result-content');
  
  // 生成PDF
  await page.pdf({ path: 'C:\\tmp\\tmp.pdf' });

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

运行这个脚本就能确保页面所有Ajax请求完成后再生成PDF，比固定等待时间靠谱得多。

方案三：修改页面代码自定义等待信号 #

如果你有权限修改目标页面的代码，可以在Ajax请求完成后给Chrome一个明确的“准备好”信号，再触发打印。

比如在页面的Ajax回调里添加：

// 假设这是你的Ajax请求逻辑
fetch('/banana/api/key')
  .then(res => res.json())
  .then(data => {
    // 把数据渲染到页面
    document.getElementById('content-area').innerHTML = JSON.stringify(data);
    // 设置全局变量标记页面已准备好
    window.pageIsReadyForPrint = true;
  });

然后用Chrome的--execute-script参数来等待这个标记：

chrome --headless --run-all-compositor-stages-before-draw --print-to-pdf=C:\tmp\tmp.pdf --execute-script="
  new Promise(resolve => {
    const checkReady = () => {
      if (window.pageIsReadyForPrint) {
        resolve();
      } else {
        setTimeout(checkReady, 100);
      }
    };
    checkReady();
  })
" http://localhost:8080/banana/key

这种方式完全精准，适合你能控制页面代码的场景。

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