使用Puppeteer批量生成网页PDF时循环失效问题咨询

使用Puppeteer批量抓取约300个网页并生成PDF时，循环仅成功处理第一个URL就停止运行；但将生成PDF的代码替换为截图代码后，循环可正常遍历所有URL。

出错的PDF生成代码 #

const puppeteer = require('puppeteer');

(async () => {
  // 创建浏览器实例
  const browser = await puppeteer.launch({ headless: true });

  // 创建页面
  const page = await browser.newPage();

  // 设置视口
  await page.setViewport({ width: 1280, height: 720 });

  const urlArray = [
    'https://ask.metafilter.com/369890/Patio-furniture-designed-for-the-PNW',
    'https://ask.metafilter.com/369889/Its-the-police-should-I-document-my-concern',
    'https://ask.metafilter.com/369888/Training-my-over-excited-dog'
  ];

for(var i = 0; i < urlArray.length; i++) {

  const website_url = urlArray[i];

  // 打开目标URL
  await page.goto(website_url, { waitUntil: 'networkidle0' });

  // 生成PDF
  const pdf = await page.pdf({
    path: 'images/page_${i+1}.pdf',
    margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
    printBackground: true,
  });
}
  // 关闭浏览器
  await browser.close();
})();

可正常运行的截图代码 #

// 生成截图
await page.screenshot({
  path: `images/screenshot_full_${i+1}.jpg`,
  fullPage: true
});

问题原因 #

1. 模板字符串语法错误：PDF路径使用了单引号'images/page_${i+1}.pdf'，单引号不支持ES6模板字符串的变量插值，导致所有循环生成的PDF都会写入同一个字面量文件名page_${i+1}.pdf，后续写入会因文件被占用或覆盖冲突触发错误。
2. Puppeteer页面状态限制：调用page.pdf()后，页面会进入不可导航的特殊状态，后续的page.goto()无法正常执行，直接导致循环中断。而page.screenshot()不存在这个限制，因此可以正常循环。

解决方案 #

方案1：每次生成PDF后创建新页面（推荐） #

复用浏览器实例，为每个URL创建新页面，避免page.pdf()导致的页面状态问题，同时修正模板字符串语法：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const urlArray = [
    'https://ask.metafilter.com/369890/Patio-furniture-designed-for-the-PNW',
    'https://ask.metafilter.com/369889/Its-the-police-should-I-document-my-concern',
    'https://ask.metafilter.com/369888/Training-my-over-excited-dog'
  ];

  for(let i = 0; i < urlArray.length; i++) {
    const website_url = urlArray[i];
    // 为每个URL创建新页面
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 720 });
    await page.goto(website_url, { waitUntil: 'networkidle0' });
    
    // 使用反引号支持模板字符串插值
    await page.pdf({
      path: `images/page_${i+1}.pdf`,
      margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
      printBackground: true,
    });
    
    // 关闭当前页面
    await page.close();
  }

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

方案2：重置页面状态（可选） #

如果希望复用单个页面，可在生成PDF后导航到空白页重置状态，同时修正模板字符串：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });

  const urlArray = [
    'https://ask.metafilter.com/369890/Patio-furniture-designed-for-the-PNW',
    'https://ask.metafilter.com/369889/Its-the-police-should-I-document-my-concern',
    'https://ask.metafilter.com/369888/Training-my-over-excited-dog'
  ];

for(let i = 0; i < urlArray.length; i++) {
  const website_url = urlArray[i];
  await page.goto(website_url, { waitUntil: 'networkidle0' });
  
  // 修正模板字符串
  await page.pdf({
    path: `images/page_${i+1}.pdf`,
    margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
    printBackground: true,
  });
  
  // 导航到空白页重置页面状态
  await page.goto('about:blank');
}

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

注意：方案2在部分场景下可能仍存在不稳定情况，方案1的可靠性更高。

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