Puppeteer page.pdf 截图是空白的

18 min read
  • 页面中包含了一些外部的图片，而Puppeteer无法加载它们，导致截图时图片处是空白的。这时，你可以尝试使用page.goto方法的waitUntil选项，来等待页面的所有资源加载完成，例如：
await page.goto('https://example.com', {waitUntil: 'networkidle0'});
await page.pdf({path: 'example.pdf'});
  • 页面中的内容超出了PDF文件的大小，导致截图时只能显示部分内容，或者显示空白。这时，你可以尝试使用page.pdf方法的width和height选项，来调整PDF文件的大小，以适应页面的内容，例如：
await page.pdf({path: 'example.pdf', width: 1920, height: 1080});
  • 页面中的内容是动态生成的，而Puppeteer在截图时没有等待它们渲染完成，导致截图时显示空白。这时，你可以尝试使用page.waitForSelector方法，来等待页面中的某个元素出现，再进行截图，例如：
await page.goto('https://example.com');
await page.waitForSelector('#content');
await page.pdf({path: 'example.pdf'});
  • 页面中的内容是通过iframe嵌入的，而Puppeteer在截图时没有获取到正确的iframe对象，导致截图时显示空白。这时，你可以尝试使用page.frames方法，来获取页面中的所有iframe对象，然后找到你想要截图的那个，再进行截图，例如：
await page.goto('https://example.com');
const frames = await page.frames();
const frame = frames.find(f => f.url().includes('iframe.com'));
await frame.pdf({path: 'example.pdf'});