PuppeteerSharp生成含滚动区域的Angular页面PDF内容不全如何解决？

你的Angular报表大概率使用了虚拟滚动/懒加载渲染策略，只有进入视口的内容才会被挂载到DOM树中。PuppeteerSharp默认加载完页面后直接导出，不会触发滚动加载逻辑，因此只能拿到首屏内容，也无法正常分页。

方案1：禁用虚拟滚动（小流量导出场景首选） #

如果PDF导出是低频场景，可以给页面加isPdfExport查询参数，Angular端收到参数后直接关闭虚拟滚动，一次性渲染全部报表内容，不需要触发滚动即可拿到全量DOM。
PuppeteerSharp侧跳转页面时携带参数即可：

// 等待页面网络空闲、基础内容渲染完成
await page.GoToAsync("https://你的报表访问地址?isPdfExport=1", WaitUntilNavigation.Networkidle2);
// 等待最后一条报表内容渲染完成，超时时间可根据报表长度调整
await page.WaitForSelectorAsync(".report-item:last-child", new WaitForSelectorOptions { Timeout = 30000 });

该方案不需要修改Puppeteer侧复杂逻辑，分页也会由浏览器默认布局自动处理，稳定性最高。

方案2：模拟滚动触发全量渲染（无需修改前端代码） #

如果不能改动Angular端代码，可以通过Puppeteer执行JS模拟逐段滚动，触发所有懒加载内容渲染，等全部内容加载完成后再导出PDF。
代码示例：

await page.GoToAsync("https://你的报表访问地址", WaitUntilNavigation.Networkidle2);
// 执行JS模拟滚动加载全量内容
await page.EvaluateFunctionAsync(@"
    async () => {
        const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
        // 滚动步长，可根据实际单条内容高度调整
        const scrollStep = 500;
        let currentScroll = 0;
        // 滚动容器，默认是body，如果你用了自定义滚动容器就替换为对应选择器
        const scrollContainer = document.querySelector('.custom-scroll-container') || document.body || document.documentElement;
        while (currentScroll < scrollContainer.scrollHeight) {
            scrollContainer.scrollTo(0, currentScroll);
            currentScroll += scrollStep;
            // 等待内容渲染，可根据前端渲染速度调整
            await delay(200);
        }
        // 最后滚回顶部，避免导出第一页是底部内容
        scrollContainer.scrollTo(0, 0);
        await delay(500);
    }
");
// 等待最后一批内容渲染完成
await page.WaitForTimeoutAsync(1000);

方案3：配置PDF参数适配自动分页 #

解决内容缺失问题后，配置PuppeteerSharp的PDF参数实现规范分页，避免内容被截断：

var pdfOptions = new PdfOptions
{
    Format = PaperFormat.A4,
    PrintBackground = true,
    // 配置边距避免内容被裁切
    MarginOptions = new MarginOptions
    {
        Top = "20px",
        Bottom = "20px",
        Left = "15px",
        Right = "15px"
    },
    // 优先使用CSS定义的分页规则
    PreferCSSPageSize = true
};
await page.PdfAsync("你的导出文件路径.pdf", pdfOptions);

如果需要避免单个报表块被分页截断，可以给Angular报表的独立内容块加如下CSS：

.report-item-block {
    page-break-inside: avoid;
}

如果需要强制在某个位置分页，可以给对应元素加CSS：page-break-after: always;

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