为什么page.setViewport无法正确设置页面的宽度和高度？

问题描述

我正在尝试从网页生成pdf。现在，如您在添加的图像中所见，我想从被红色边框包围的元素中生成一个pdf。

我认为可以通过将前端的元素width和height设置为595px和842px并将视口设置为await page.setViewport({ width: 595,height: 842,deviceScaleFactor: 1 });来完成这项工作

为什么生成的pdf包含所有不必要的空格？以及如何生成适合整个元素的pdf文件？

为澄清起见，我不能使用page.setContent，因为很多数据都是动态的，并且我还必须保留CSS。

我的完整代码：

async function generatePDF() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ width: 595,deviceScaleFactor: 1 });
    await page.goto("http://localhost:8080",{ waitUntil: 'networkidle2' });

    const options = {
        path: "invoice.pdf",pageRanges: '1',format: "a4",printBackground: true,}
    await page.pdf(options);
    await browser.close();
}

解决方法

pdf不依赖视口。它不像screenshot函数那样工作，它更像是打印操作，具体取决于纸张尺寸。

您可以尝试将height和width传递给pdf函数：

const options = {
    path: "invoice.pdf",pageRanges: '1',width: "595px",height: "842px",printBackground: true,}

html javascript webautomation