SelectPDF在Razor页面无法保留CSS样式问题求助

核心原因 #

你构造的htmlData只是一个孤立的<p>标签片段，没有包含页面头部的<base>和<link>样式引用。SelectPDF解析这个片段时，无法获取到Bootstrap的CSS规则，自然无法渲染样式。而WebForms中应该是直接渲染了完整的页面（包含head部分），所以能正常加载样式。

解决方法 #

方法1：构造完整的HTML结构

把包含样式引用的完整HTML文档传入ConvertHtmlString，让SelectPDF能解析到CSS：

public async Task<IActionResult> OnGetAsync()
{
    var baseUrl = $"{Request.Scheme}://{Request.Host}";
    // 构造包含head和样式引用的完整HTML
    var htmlData = $@"
    <html>
        <head>
            <base href=""{baseUrl}/"" />
            <link href=""/lib/bootstrap/css/bootstrap.min.css"" rel=""stylesheet"" />
        </head>
        <body>
            <p class=""h1 text-center fw-bold"">Test</p>
        </body>
    </html>";

    HtmlToPdf converter = new();
    converter.Options.PdfCompressionLevel = PdfCompressionLevel.Best;
    converter.Options.MarginTop = 10;
    converter.Options.MarginLeft = 10;
    converter.Options.MarginRight = 10;

    PdfDocument doc = converter.ConvertHtmlString(htmlData, baseUrl);
    var pdfBytes = doc.Save();
    doc.Close();

    Response.ContentType = "application/pdf";
    Response.Headers.Add("Content-Disposition", "inline");

    return File(pdfBytes, "application/pdf");
}

方法2：通过SelectPDF API直接添加CSS文件

如果不想构造完整HTML，可以用AddCssFile方法直接加载本地或远程的CSS文件，避免依赖页面的head结构：

public async Task<IActionResult> OnGetAsync()
{
    var htmlData = @"<p class=""h1 text-center fw-bold"">Test</p>";

    HtmlToPdf converter = new();
    converter.Options.PdfCompressionLevel = PdfCompressionLevel.Best;
    converter.Options.MarginTop = 10;
    converter.Options.MarginLeft = 10;
    converter.Options.MarginRight = 10;

    // 加载本地Bootstrap CSS文件（替换为你的实际物理路径）
    var cssPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "lib", "bootstrap", "css", "bootstrap.min.css");
    converter.AddCssFile(cssPath, true);

    var baseUrl = $"{Request.Scheme}://{Request.Host}";
    PdfDocument doc = converter.ConvertHtmlString(htmlData, baseUrl);
    var pdfBytes = doc.Save();
    doc.Close();

    Response.ContentType = "application/pdf";
    Response.Headers.Add("Content-Disposition", "inline");

    return File(pdfBytes, "application/pdf");
}

额外注意事项 #

• 确保baseUrl或CSS文件路径是可访问的：如果是本地文件，要使用正确的物理路径；如果是URL，要保证SelectPDF能访问到该地址（比如本地开发环境不要有跨域或权限问题）。
• 若使用远程CSS，可直接传入完整URL到AddCssFile，比如converter.AddCssFile("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css", true);

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