如何使用Puppeteer获取新打开页面的PDF文件？

你踩的这个坑我之前也碰到过！核心问题很明确：你代码里的page对象自始至终都指向初始的Google首页，点击「我很幸运」打开新标签页后，你并没有切换到新页面的实例上，所以调用page.pdf()自然还是生成初始页面的内容。

要解决这个问题，你需要监听浏览器的新页面创建事件，获取到新打开页面的实例，再用这个实例来生成PDF。下面是修改后的完整代码，我会逐行解释关键改动：

const puppeteer = require('puppeteer');
async function takePDF(){ 
  const browser = await puppeteer.launch({ slowMo:500, defaultViewport:null }); 
  const page = await browser.newPage(); 
  const startUrl = 'https://www.google.com/'; 
  await page.goto(startUrl); 

  // 关键步骤1：提前监听新页面创建事件，等待新页面出现
  const newPagePromise = new Promise(resolve => {
    browser.once('targetcreated', target => {
      // 过滤掉浏览器自身的目标，只保留页面类型的目标
      if(target.type() === 'page') {
        resolve(target.page());
      }
    });
  });

  await page.mouse.click(1030,468, { button: 'left'}); //点击「我很幸运」按钮

  // 关键步骤2：等待新页面实例返回
  const newPage = await newPagePromise;
  // 等待新页面完全加载稳定（networkidle2表示网络请求基本结束，内容加载完成）
  await newPage.waitForLoadState('networkidle2');

  // 关键步骤3：用新页面实例生成PDF
  await newPage.pdf({path: 'screenshot.pdf'}); 

  // 异步关闭浏览器，确保PDF生成完成后再执行关闭操作
  await browser.close(); 
}
takePDF();

关键改动说明： #

• 监听targetcreated事件：在点击按钮前通过browser.once监听新目标创建，确保能精准捕获到新打开的标签页。
• 获取新页面实例：当新标签页创建后，从目标对象中取出对应的页面实例，这才是你需要操作的新页面。
• 等待页面加载稳定：用waitForLoadState('networkidle2')确保新页面的内容完全加载完毕，避免生成空白或不完整的PDF。
• 切换到新实例生成PDF：最后调用新页面的pdf()方法，这样生成的就是「我很幸运」跳转后的搜索结果页面内容了。

另外补充一点：原来的browser.close()是同步调用，一定要加上await，否则可能会出现PDF还没生成完浏览器就关闭的情况。

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