Playwright page.pdf()仅导出单页且内容截断问题求助

针对你遇到的Playwright导出PDF仅显示首屏、右侧内容截断的问题，可通过调整滚动方式、视口设置和PDF导出参数解决，以下是具体方案：

修改后的代码 #

import os
import time
from playwright.sync_api import sync_playwright

file_path = "C:/Users/PMYLS/Desktop/Code/ScribdPDF/Lab6.html"
file_url = f"file://{file_path}"

with sync_playwright() as p:
    # 先开启非无头模式调试，确认效果后再改为headless=True
    browser = p.chromium.launch(headless=False)
    # 设置适配宽屏的初始视口
    page = browser.new_page(viewport={"width": 1920, "height": 1080})
    # 等待页面所有资源加载完成
    page.goto(file_url, wait_until="load")

    # 用原生JS滚动到底部，触发动态内容渲染（比mouse.wheel更可靠）
    page.evaluate("""() => {
        window.scrollTo(0, document.body.scrollHeight);
    }""")
    time.sleep(3)  # 根据页面加载速度调整等待时间

    # 滚动回顶部，确保页面布局稳定
    page.evaluate("""() => {
        window.scrollTo(0, 0);
    }""")
    time.sleep(1)

    # 导出PDF时强制使用自定义宽高，保留背景样式
    page.pdf(
        path="sales_report.pdf",
        width="1920px",
        height="1080px",
        print_background=True,
        prefer_css_page_size=False,
    )

    browser.close()

关键调整说明 #

• 滚动方式替换：放弃mouse.wheel，改用page.evaluate执行原生JS滚动，适配自定义滚动容器的页面，确保所有内容触发渲染
• 视口与加载等待：设置大尺寸初始视口避免内容提前截断，goto时用wait_until="load"确保所有图片、样式等资源加载完成
• PDF导出参数优化：
  • 明确设置宽高适配页面内容
  • print_background=True保留页面背景色、图片等样式
  • prefer_css_page_size=False强制忽略页面CSS的固定尺寸限制，避免内容被裁切

额外排查点 #

如果仍有内容截断，可尝试：

• 检查页面CSS中是否存在overflow: hidden或固定宽度的容器，用临时JS修改：

  page.evaluate("""() => {
      document.body.style.overflow = 'visible';
      // 替换为实际截断内容的容器选择器
      document.querySelector('.container').style.width = '100%';
  }""")
  

• 延长动态内容等待时间，或等待特定元素加载完成（比如page.wait_for_selector('.content-item:last-child')）

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