Javascript 为什么page.setViewport不能准确设置页面的宽度和高度？

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

我想我可以通过将前端的元素“

width

和

height

设置为

595px

和

842px

，将视口设置为

wait 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, height: 842, 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
不依赖于视口。它不像
屏幕截图
功能那样工作，它更像一个打印动作，这取决于纸张大小

您可以尝试将
高度
和
宽度
传递给
pdf
函数：

const选项={
路径：“invoice.pdf”，
页面范围：“1”，
宽度：“595px”，
高度：“842px”，
背景：是的，
}
Hmm，这也没有改变任何事情。看起来影响pdf外观的唯一因素是前端的宽度和高度，对吗？。将前端元素的宽度和高度设置为
790px
和
1117px
会产生以下pdf:。我不明白这些任意的数字。哈哈。你知道一个不同的方式吗？