Headless Chrome仅同机加载CSS，Puppeteer Sharp生成PDF样式丢失

我们使用Puppeteer Sharp结合Headless Chrome生成PDF，此前运行正常，但近期生成的PDF丢失所有Bootstrap样式，仅当客户端与Web服务器为同一机器时，Headless Chrome才会加载CSS文件。

近期事件 #

• 16日升级至.NET 8；
• 28日账单团队反馈PDF生成异常（该工具每日使用）；
• PDF生成流程未做任何改动。

生成PDF的C#代码 #

public async Task<byte[]> GetPdf(Controller controller, string view, object model, string pdfName, string? headerHtml = null, string? footerHtml = null)
{
    using (var browserFetcher = new BrowserFetcher())
    {
        await browserFetcher.DownloadAsync(PuppeteerSharp.BrowserData.Chrome.DefaultBuildId);

        using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions
        {
            Headless = true
        }))
        {
            if (string.IsNullOrWhiteSpace(footerHtml))
            {
                footerHtml = await this.RenderView(controller, "_ReportFooter", "");
            }

            PdfOptions pdfOptions = new PdfOptions()
            {
                DisplayHeaderFooter = true,
                FooterTemplate = footerHtml,
                HeaderTemplate = headerHtml ?? "<span></span>",
                PrintBackground = true,
                Format = PaperFormat.A4,
                MarginOptions =
                                {
                                    Top = "20px",
                                    Bottom = "60px",
                                    Left = "40px",
                                    Right = "40px"
                                }
            };


            using (var page = await browser.NewPageAsync())
            {
                //await page.GoToAsync("https://***domainName***/Workorders/ViewWorkorderPDF?workorderIdsAsString=239379", new NavigationOptions
                //{
                //    WaitUntil = [WaitUntilNavigation.Load, WaitUntilNavigation.DOMContentLoaded, WaitUntilNavigation.Networkidle0, WaitUntilNavigation.Networkidle2]
                //});
                //await page.SetContentAsync(await RenderView(controller, view, model, true), new NavigationOptions { Timeout = 60000, WaitUntil = [WaitUntilNavigation.Load, WaitUntilNavigation.DOMContentLoaded, WaitUntilNavigation.Networkidle0, WaitUntilNavigation.Networkidle2] });
                await page.SetContentAsync(await RenderView(controller, view, model, true), new NavigationOptions { WaitUntil = [WaitUntilNavigation.Load, WaitUntilNavigation.Networkidle0] });
                await page.WaitForNavigationAsync();
                var toReturn = await page.PdfDataAsync(pdfOptions);
                await browser.CloseAsync();

                return toReturn;
            }
        }
    }
}

HTML视图示例（注：@host已替换为实际主机名） #

<html>
<head>
    <meta charset="utf-8">
    <base href="https://@host/">
    @*<link href="https://@host/lib/WorkordersPrintable-BootStrap/css/bootstrap.min.css" rel="stylesheet" asp-append-version="true" />*@
    <link href="https://@host/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" asp-append-version="true" />
    <link href="https://@host/css/WorkordersPrintable.css" rel="stylesheet" asp-append-version="true" />
    @*<link href="https://@host/css/WorkordersPrintableMedia.css" rel="stylesheet" asp-append-version="true" />*@
</head>
<body>
    <div class="container PrintView">
        <div class="row">
            @if (Model.BulkSummary != null && Model.BulkSummary.Count() > 0)
            {
                <div class="col-12">
                    <div class="d-flex justify-content-center">
                        @if (Model.CompanyName != null)
                        {
                            <h3>@Model.CompanyName - Bulk Report</h3>
                        }
                        <h3>@Model.StartDate - @Model.EndDate</h3>
                    </div>
                </div>
....
</body>
</html>

PDF效果对比 #

• 客户端与Web服务器为同一机器时（正常显示）：
  

• 客户端为其他机器时（样式丢失）：
  

该问题在开发环境中未出现，在Web服务器本机浏览器访问生成器时PDF正常，推测可能是网络变更或Chrome版本问题，已更新Windows Server 2016服务器，但问题仍存在。

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