使用Puppeteer转HTML为PDF时Mathjax渲染不完整，求等待方案

核心问题是Puppeteer默认的等待逻辑（比如networkidle0）只关注网络请求完成，没法感知MathJax这类客户端脚本的渲染过程。可以通过以下几种方式让Puppeteer等待公式渲染完成：

1. 利用MathJax官方的渲染完成Promise #

MathJax v3+提供了typesetPromise()方法，会在所有公式渲染完成后才resolve，直接在页面中调用这个方法就能精准等待：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('目标HTML页面地址', { waitUntil: 'networkidle0' });

  // 等待MathJax加载并完成所有公式渲染
  await page.evaluate(async () => {
    // 轮询等待MathJax全局对象加载
    while (typeof MathJax === 'undefined') {
      await new Promise(resolve => setTimeout(resolve, 100));
    }
    // 等待公式渲染完成
    await MathJax.typesetPromise();
  });

  // 此时生成PDF，公式已完全渲染
  await page.pdf({ path: 'output.pdf', format: 'A4' });

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

2. 通过DOM元素状态判断渲染完成 #

如果你的页面用的是MathJax旧版本，或者无法直接调用typesetPromise()，可以通过检查MathJax生成的DOM元素状态来判断：

// 在page.goto之后添加这段代码
await page.waitForFunction(() => {
  // 获取所有MathJax渲染的元素
  const mathNodes = document.querySelectorAll('.MathJax');
  // 确认所有元素都已完成渲染（aria-hidden属性为true是渲染完成的标志）
  return mathNodes.length > 0 && Array.from(mathNodes).every(node => node.getAttribute('aria-hidden') === 'true');
}, { timeout: 30000 }); // 设置超时时间，避免无限等待

3. 应急方案：固定等待时间（不推荐） #

如果上面两种方法都无法适配，可临时增加固定等待时间，根据页面实际渲染速度调整时长：

await page.waitForTimeout(2000); // 等待2秒后生成PDF

这种方法不够灵活，页面复杂时可能需要调整时长，仅作为临时应急手段。

在线转换工具能正确渲染，本质是它们内部已经处理了异步渲染的等待逻辑，和上面第一种方法的原理一致。

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