Question

我正在玩 Puppeteer v1.3.0 ，以便在构建/部署期间在各个断点处生成一些屏幕截图。我似乎并不了解如何正确生成整页截图。

我可以完全按照我想要的方式获得整页截图，但是我必须设置两次视口尺寸这对我来说似乎很奇怪（我只是设置一个任意高度，然后评估clientHeight ）：

//xl
await page.setViewport({
    width: 1201,
    height: 600
});
await page.setViewport({
    width: 1201,
    height: await page.evaluate(() => document.body.clientHeight),
    isMobile: true //whether the meta viewport tag is taken into account
});
await page.screenshot({path: 'xl.png');

我已尝试设置waitUntil networkidle，只是评估clientHeight并在page.screenshot中将fullPage设置为true：

await page.goto('my-url-here', {
    waitUntil: 'networkidle2'
});
await page.setViewport({
    width: 1201,
    height: await page.evaluate(() => document.body.clientHeight),
    isMobile: true //whether the meta viewport tag is taken into account
});
await page.screenshot({path: 'arrowdental_xl.png', fullPage: true});

我获得了整页截图，但底部有一堆额外的空白，这是我不想要的。

在Puppeteer中获取整页截图的正确方法是什么？同样，上面的第一种方法可行，但感觉愚蠢我必须设置两次视口尺寸。如果可能的话，我希望有更清晰的代码。

Answer 1

使用木偶尖V 1.11.2

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
});
var page = await browser.NewPageAsync();
await page.GoToAsync("https://www.google.com/");
await page.ScreenshotAsync(@"c:\temp\google.png", new ScreenshotOptions {FullPage = true});

，从而传递到ScreenshotOptions.FullPage ScreenshotAsync（）

Puppeteer整页截图，在页面底部呈现额外的空白

1 个答案: