使用Playwright将HTML导出为单页PDF时内容溢出问题求助

背景 #

使用Python Playwright通过Chromium打开本地HTML文件，目标是借助Page PDF API将渲染后的页面导出为包含全部内容的单页PDF。

当前操作步骤 #

• 启动Chromium实例
• 通过本地HTML文件路径打开页面
• 获取body元素的BoundingClientRect
• 将获取到的宽高传入Page的pdf方法

问题现象 #

少量内容会溢出到第二页，无法完全显示在单页PDF中。

已尝试的方法 #

• 调整宽高参数：增加固定高度可让更多内容显示在第一页，但仍偶尔溢出；使用更大宽度能解决溢出问题，但会导致PDF排版难看
• 推测问题根源为文本换行：无换行内容时不会出现溢出情况

最小复现代码 #

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.wait_for_timeout(100)
        await page.goto(
            'file:///path/to/file.html',
            wait_until='networkidle',
        )
        await page.wait_for_timeout(100)
        dimensions = await page.evaluate(
            """
        () => {
            const rect = document.body.getBoundingClientRect();
            return {
                "width": rect.width,
                "height": rect.height 
            }
        }
        """
        )
        await page.pdf(width=str(dimensions['width']), height=str(dimensions['height']), path='test.pdf')

if __name__ == '__main__':
    asyncio.run(main())

示例HTML说明 #

示例HTML包含易触发换行的文本内容，会导致PDF导出时出现内容溢出问题。

解决方法 #

1. 精确计算页面总高度 #

getBoundingClientRect()仅获取可视区域的高度，页面实际总高度需使用滚动高度计算，同时增加少量冗余避免渲染精度问题：

() => {
    const body = document.body;
    const html = document.documentElement;
    // 取所有高度计算值的最大值，确保覆盖所有情况
    const height = Math.max(body.scrollHeight, body.offsetHeight, 
                          html.clientHeight, html.scrollHeight, html.offsetHeight);
    const width = Math.max(body.scrollWidth, body.offsetWidth, 
                          html.clientWidth, html.scrollWidth, html.offsetWidth);
    return {
        "width": width,
        "height": height + 20  // 增加20px冗余量
    }
}

2. 注入CSS禁用自动分页 #

通过CSS强制页面不分页，并清除默认边距：

await page.add_style_tag(content="""
    @page { size: auto; margin: 0; }
    body { margin: 0; padding: 0; page-break-inside: avoid; }
""")

3. 优化页面等待逻辑 #

替换固定超时等待，改为等待页面完全加载完成：

await page.goto(
    'file:///path/to/file.html',
    wait_until='load',  // 等待所有资源加载完毕
)

完整优化代码 #

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        # 等待页面完全加载
        await page.goto(
            'file:///path/to/file.html',
            wait_until='load',
        )
        # 注入禁用分页的CSS
        await page.add_style_tag(content="""
            @page { size: auto; margin: 0; }
            body { margin: 0; padding: 0; page-break-inside: avoid; }
        """)
        # 精确计算页面总尺寸
        dimensions = await page.evaluate(
            """
        () => {
            const body = document.body;
            const html = document.documentElement;
            const height = Math.max(body.scrollHeight, body.offsetHeight, 
                                  html.clientHeight, html.scrollHeight, html.offsetHeight);
            const width = Math.max(body.scrollWidth, body.offsetWidth, 
                                  html.clientWidth, html.scrollWidth, html.offsetWidth);
            return {
                "width": width,
                "height": height + 20
            }
        }
        """
        )
        # 导出PDF，开启背景打印
        await page.pdf(
            width=str(dimensions['width']), 
            height=str(dimensions['height']), 
            path='test.pdf',
            printBackground=True
        )
        await browser.close()

if __name__ == '__main__':
    asyncio.run(main())

内容的提问来源于stack exchange，提问作者user10802841