PuppeteerSharp生成PDF时无法显示Base64编码图片问题

问题根源：你给图片加了loading="lazy"懒加载属性，Puppeteer生成PDF时默认只会加载初始视口内的内容，不会像浏览器那样通过滚动触发懒加载，所以视口外的Base64图片没被加载，自然在PDF里看不到。

下面是几种可行的解决办法：

1. 直接移除懒加载属性 #

修改HTML里的img标签，删掉loading="lazy"，强制图片立即加载：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Sample Image">

2. 用代码批量禁用懒加载 #

如果没法直接修改HTML，在Puppeteer加载页面后，执行JS批量处理所有懒加载图片：

// 页面加载完成后执行
await page.EvaluateFunctionAsync(@"
    const lazyImgs = document.querySelectorAll('img[loading=""lazy""]');
    lazyImgs.forEach(img => {
        // 把懒加载模式改为立即加载
        img.loading = 'eager';
        // 重新设置src确保触发加载（避免已有懒加载逻辑拦截）
        if (!img.complete) {
            img.src = img.src;
        }
    });
");

3. 模拟滚动触发所有懒加载 #

让Puppeteer模拟滚动到页面底部，等所有懒加载图片加载完成后再生成PDF：

// 模拟滚动加载全部内容
await page.EvaluateFunctionAsync(@"
    await new Promise(resolve => {
        let totalScroll = 0;
        const scrollStep = 200;
        const timer = setInterval(() => {
            window.scrollBy(0, scrollStep);
            totalScroll += scrollStep;
            // 滚动到页面底部时停止
            if (totalScroll >= document.body.scrollHeight) {
                clearInterval(timer);
                resolve();
            }
        }, 50);
    });
");

// 等待所有图片加载完成
await page.WaitForFunctionAsync("Array.from(document.images).every(img => img.complete)");

// 生成PDF
await page.PdfAsync(outputPath);

内容的提问来源于stack exchange，提问作者Jan Skála