Puppeteer 视口设置在创建 PDF 时无效答案

【问题标题】：Puppeteer viewport settings having no effect when creating PDFPuppeteer 视口设置在创建 PDF 时无效
【发布时间】：2020-11-13 18:07:54
【问题描述】：

我正在尝试使用 puppeteer 创建 PDF。创建 PDF 时设置视口根本没有效果。但是，视口设置确实适用于屏幕截图。过去似乎在 github 上发现了一些问题，但它们显然已被关闭。传入 defaultViewport: null 应该是解决方案。

这是我的代码：

browser = await chromium.puppeteer.launch({
    args: chromium.args,
    defaultViewport: null,
    executablePath: await chromium.executablePath,
    ignoreHTTPSErrors: true,
    headless: true,
});

let page = await browser.newPage();

// Set viewport
await page.setViewport({width: 1440, height: 900, deviceScaleFactor: 2});

// Generate pdf
const doc = await page.pdf(options);

我还尝试在启动时传递视口设置。

谢谢！

【问题讨论】：

页面视口和 pdf 输出大小是两个不同的东西。尝试更改浏览器窗口的大小并执行文件 -> 打印。您会看到它不会影响您的打印文档，但显然它会影响屏幕截图。

标签： javascript node.js puppeteer google-chrome-headless webautomation

【解决方案1】：

page.pdf 模拟“打印到 PDF”操作。这意味着两件事：首先是media print，其次是您需要将特定格式或大小传递给pdf 函数。

来自documentation：

width、height 和 margin 选项接受标有单位的值。未标记的值被视为像素。

几个例子：
* page.pdf({width: 100}) - 打印宽度设置为 100 像素。
* page.pdf({width: '100px'}) - 打印宽度设置为 100 像素。
* page.pdf({width: '10cm'}) - 打印宽度设置为 10 厘米。

所有可能的单位是：
* px - 像素
* in - 英寸
* cm - 厘米
* mm - 毫米

format 选项是：
* Letter: 8.5 英寸 x 11 英寸
* Legal: 8.5 英寸 x 14 英寸
* Tabloid: 11 英寸 x 17 英寸
* Ledger: 17 英寸 x 11 英寸
* A0: 33.1 英寸 x 46.8 英寸
* A1: 23.4 英寸 x 33.1 英寸
* A2: 16.54 英寸 x 23.4 英寸
* A3: 11.7 英寸 x 16.54 英寸
* A4: 8.27 英寸 x 11.7 英寸
* A5: 5.83 英寸 x 8.27 英寸
* A6: 4.13 英寸 x 5.83 英寸

【讨论】：

将大小传递给 PDF 选项定义了 PDF 大小，不幸的是这不是我的问题。问题是在渲染之前更改视口。