如何在 Puppeteer 中设置最大视口？

Posted 2023-03-07

【中文标题】如何在 Puppeteer 中设置最大视口？

【英文标题】：How to set max viewport in Puppeteer?

【发布时间】：2019-03-04 07:58:14

【问题描述】：

当我运行一个新页面时，我必须使用setViewport 函数指定视口的大小：

await page.setViewport(
    width: 1920,
    height: 1080
)

我想使用最大视口。

如何使视口根据窗口大小调整大小？

【参考方案1】：

这是一种在运行时通过 Chrome Devtools 协议会话调用 headful 中的 Page.setViewport() 和 headless 中的 Browser.setWindowBounds() 的方法：

async function setWindowSize(page, width, height) 
  if(headless) 
    const session = await page.target().createCDPSession();
    const windowId = await session.send('Browser.getWindowForTarget');
    await session.send('Browser.setWindowBounds', windowId, bounds: width: width, height: height);
    await session.detach();
   else 
    await page.setViewport(width: width, height: height);
  

请参阅my comment on GitHub 了解更多信息。

【参考方案2】：

我遇到了同样的问题，对我有用的是这个。

const browser = await puppeteer.launch(
  headless: false,
  args: ['--window-size=1920,1080'],
  defaultViewport: null
  );

【讨论】：

当 headless=true 时使用 await page._client.send('Emulation.clearDeviceMetricsOverride');

【参考方案3】：

对我来说，defaultViewport: null 和 args: ['--start-maximized'] 的组合给了我全屏，视图适合屏幕大小，所以：

browser = await puppeteer.launch(
            headless: false,
            args: [
                '--start-maximized',
            ],
            defaultViewport: null,
        ); 

【参考方案4】：

您可以将--window-size 标志作为参数传递给puppeteer.launch()，以将窗口大小更改为所需的width 和height。

然后您可以调用 Chrome Devtools 协议方法 Emulation.clearDeviceMetricsOverride 来清除覆盖的设备指标（包括默认的 800 x 600 视口）。

这将导致视口与窗口大小匹配（截屏时等）。

const browser = await puppeteer.launch(
  args: [
    '--window-size=1920,1080',
  ],
);

const page = await browser.newPage();

await page._client.send('Emulation.clearDeviceMetricsOverride');

await page.screenshot(
  path: 'example.png', // Image Dimensions : 1920 x 1080
);

注意：page.viewport() 仍将返回 width: 800, height: 600 ，唯一可靠地更改这些属性值的方法是使用page.setViewport()。

请参阅下面的完整示例：

'use strict';

const puppeteer = require('puppeteer');

(async () => 
  /* ============================================================
      Prerequisite: Set Window size
  ============================================================ */

  const browser = await puppeteer.launch(
    args : [
      '--window-size=1920,1080',
    ],
  );

  const page = await browser.newPage();

  await page.goto('https://www.example.com/');

  /* ============================================================
      Case 1: Default Viewport
  ============================================================ */

  console.log('Case 1 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 1 - Height :', page.viewport().height); // Height : 600

  await page.screenshot(
    path: 'image-1.png', // Image Dimensions : 800 x 600
  );

  /* ============================================================
      Case 2: Clear Overridden Device Metrics
  ============================================================ */

  await page._client.send('Emulation.clearDeviceMetricsOverride');

  console.log('Case 2 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 2 - Height :', page.viewport().height); // Height : 600

  await page.screenshot(
    path: 'image-2.png', // Image Dimensions : 1920 x 1080
  );

  /* ============================================================
      Case 3: Manually Set Viewport
  ============================================================ */

  await page.setViewport(
    width: 1920,
    height: 1080,
  );

  console.log('Case 3 - Width  :', page.viewport().width);  // Width  : 1920
  console.log('Case 3 - Height :', page.viewport().height); // Height : 1080

  await page.screenshot(
    path: 'image-3.png', // Image Dimensions : 1920 x 1080
  );

  /* ============================================================
      Case 4: Revert Back to Default Viewport
  ============================================================ */

  await page.setViewport(
      width: 800,
      height: 600,
  );

  console.log('Case 4 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 4 - Height :', page.viewport().height); // Height : 600

  await page.screenshot(
    path: 'image-4.png', // Image Dimensions : 800 x 600
  );

  await browser.close();
)();

【讨论】：

tks，使用await page._client.send('Emulation.clearDeviceMetricsOverride'); 使--window-size 工作

【参考方案5】：

可能值得一提的是，如果将puppeteer.launch(defaultViewport: null) 与puppeteer.connect() 结合使用，则需要再次传递defaultViewport: null，否则视口将调整回默认大小。所以在这种情况下，使用：

await puppeteer.connect(browserWSEndpoint: ws, defaultViewport: null)

【参考方案6】：

const browser = await puppeteer.launch( "headless": false, args: ['--start-maximized']  );
const page = await browser.newPage();
await page.setViewport(width:0, height:0);

" const browser = ..." 行最大化您的 chrome 窗口。但请注意，页面是需要设置视口的位置，并且在您创建页面时它仍将保持默认大小。

当您将视口的宽度和高度设置为“0”时，页面视口大小将等于浏览器的大小。

【参考方案7】：

我可能已经很晚了。不过对于其他人，请尝试：

const browser = await puppeteer.launch(defaultViewport: null);

如上所述将defaultViewport 选项设置为null 以禁用800x600 分辨率。那么它需要最大分辨率。

【讨论】：

@gdoron 在他们的文档中提到，puppeteer.launch(options)。请参阅defaultViewport 选项，它明确指出将其设置为null，它会禁用默认视口 + 它对我有用。

为我工作过： const browser = await puppeteer.launch( headless: false, defaultViewport: null );

当禁用无头模式并以可视方式启动 Chromium 时，这确认视口使用其最大允许大小。与 pdf 选项 preferCSSPageSize: true 一起，可以更轻松地设置 pdf 的样式。

就我而言，您的答案和@Grant Miller 的答案（即使用参数设置窗口大小）都是解决方案

【参考方案8】：

正如issue中所解释的那样

page.setViewport( width: 0, height: 0 );

通过推断当前屏幕分辨率使 chromium 设置视口。似乎只适用于headless: false