使用PuppeteerSharp v18.0.5.0生成PDF丢失颜色问题求助

针对你遇到的PuppeteerSharp生成PDF丢失颜色的问题，即使已设置PrintBackground和打印CSS仍无效，可尝试以下几种解决方案：

1. 调整浏览器启动参数 #

Headless Chrome的默认打印配置可能忽略颜色，启动浏览器时添加强制颜色相关参数：

using var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
    Args = new[] 
    { 
        "--force-color-profile=srgb", 
        "--enable-print-preview",
        "--no-sandbox" // 部分服务器环境可能需要该参数
    }
});

--force-color-profile=srgb强制浏览器使用标准sRGB颜色空间，保证颜色渲染一致；--enable-print-preview让打印行为更贴近Chrome直接打印的逻辑。

2. 优化打印CSS规则 #

扩展选择器范围，同时补充标准属性前缀，确保所有元素的颜色打印规则生效：

@media print {
    @page {
        margin: 22mm 15mm 35mm 15mm;
        background-color: teal !important;
    }

    /* 给所有元素强制开启颜色打印 */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body, #content, #header, #footer, .page {
        background-color: teal !important;
        /* 若需要文字颜色正常显示，补充文字颜色设置 */
        color: #ffffff !important;
    }
}

同时添加标准属性print-color-adjust和webkit前缀属性，覆盖所有元素避免遗漏样式。

3. 页面加载后强制触发颜色渲染 #

等待页面资源完全加载后，通过JS强制给所有元素设置颜色调整属性：

// 等待页面所有资源加载完成
await page.WaitForNavigationAsync(new NavigationWaitOptions { WaitUntil = WaitUntilNavigation.Networkidle0 });

// 执行JS强制开启颜色打印
await page.EvaluateExpressionAsync(@"
    document.querySelectorAll('*').forEach(el => {
        el.style.webkitPrintColorAdjust = 'exact';
        el.style.printColorAdjust = 'exact';
    });
");

// 生成PDF
await page.PdfAsync(pdfPath, new PdfOptions
{
    Format = PaperFormat.A4,
    PrintBackground = true,
    PreferCSSPageSize = true,
});

确保页面所有DOM元素渲染完成后再执行强制设置，避免样式未生效就生成PDF。

4. 验证Chrome版本兼容性 #

PuppeteerSharp 18.0.5.0对应Chrome 117.x版本，若环境中Chrome版本不匹配可能导致打印异常。可通过以下代码检查当前Chrome版本：

var browserVersion = await browser.GetVersionAsync();
Console.WriteLine($"Chrome版本: {browserVersion}");

若版本不兼容，建议更新PuppeteerSharp包至对应Chrome版本，或同步更新环境中的Chrome浏览器。

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