使用DinkToPdf生成PDF时页面样式与原HTML不匹配的问题求助

使用DinkToPdf库渲染HTML生成PDF时，出现以下显示不一致问题：

• 表格结构丢失
• text-center样式未生效（文本仍左对齐）
• PNG图片显示空白

相关代码 #

PDF生成服务类代码 #

public async Task<byte[]> GeneratePDF2(string htmlContent)
{
    var doc = new HtmlToPdfDocument()
    {
        GlobalSettings =
        {
            ColorMode = ColorMode.Color,
            Orientation = Orientation.Portrait,
            PaperSize = PaperKind.A4,
        },
        Objects = 
        {
            new ObjectSettings()
            {
                PagesCount = true,
                HtmlContent = htmlContent,
                WebSettings = { DefaultEncoding = "utf-8" },
                FooterSettings = { FontName = "Arial", FontSize = 9, Right = "Sayfa [page] / [toPage]", Line = true }
            }
        }
    };

    var pdf = _converter.Convert(doc);
    return pdf;
}

PDF控制器代码 #

public async Task<IActionResult> GeneratePDF(Guid GUID)
{
    Certificate_Dto model = new Certificate_Dto();

    var applicationVW = await _serviceManager.VW_Applications.GetEntityAsync(x => x.GUID == GUID);
    if (applicationVW != null)
    {
        string CourseMakersJSON = _serviceManager.Courses.GetValue(a => a.CourseID == applicationVW.CourseID, "CourseMakersJSON");

        List<int> CourseTypeMakerIDs = new();

        if (!string.IsNullOrEmpty(CourseMakersJSON))
        {
            CourseTypeMakerIDs = CourseMakersJSON.Split(',').Select(int.Parse).ToList();
        }

        model = new()
        {
            //process
        };
    }

    var htmlContent = await RenderViewToStringAsync(HttpContext, "Views/Application/P_Certificate.cshtml", model);
    var pdfData = await _pdfService.GeneratePDF2(htmlContent);
    var fileName = $"{DateTime.Now:yyyyMMddHHmmss}.pdf";
    Response.Headers.Add("Content-Disposition", $"inline; filename={fileName}");
    return File(pdfData, "application/pdf");
}


private async Task<string> RenderViewToStringAsync<TModel>(HttpContext httpContext, string viewName, TModel model)
{
    var routeData = new RouteData();
    routeData.Values["controller"] = "Application";
    var actionContext = new ActionContext(httpContext, routeData, new ActionDescriptor());

    var viewResult = _viewEngine.GetView(executingFilePath: null, viewPath: viewName, isMainPage: true);
    if (!viewResult.Success)
    {
        throw new InvalidOperationException($"Sayfa bulunamadı: {viewName}");
    }

    var viewDictionary = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
    {
        Model = model
    };

    using var sw = new StringWriter();
    var viewContext = new ViewContext(
        actionContext,
        viewResult.View,
        viewDictionary,
        new TempDataDictionary(actionContext.HttpContext, _tempDataProvider),
        sw,
        new HtmlHelperOptions());

    await viewResult.View.RenderAsync(viewContext);

    return sw.ToString();
}

视图页面相关代码 #

图片标签

<img src="~/Images/Image/logo-1.png" alt="Logo" style="height:70px" srcset="" />

文本居中容器

<div class="col col-12 text-center" >

解决方案 #

1. 表格结构丢失问题 #

DinkToPdf基于wkhtmltopdf，对表格样式支持需要明确规则，避免依赖框架默认样式：

• 给表格添加明确的内联CSS样式：

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

• 如果使用Bootstrap等框架，确保渲染HTML时完整引入框架CSS，或者将表格相关样式内联到HTML中（wkhtmltopdf对外部CSS加载支持有限）。

2. text-center样式未生效问题 #

• 直接替换为内联样式，避免依赖类选择器：

<div class="col col-12" style="text-align:center;">

• 检查是否有其他CSS规则覆盖text-align属性，可先在浏览器中预览渲染后的HTML，确认样式是否正常。

3. PNG图片显示空白问题 #

• 转换虚拟路径为绝对路径，ASP.NET的~/无法被wkhtmltopdf识别，修改图片标签：

<img src="@Url.Content("~/Images/Image/logo-1.png")" alt="Logo" style="height:70px" />

• 或者在ObjectSettings中指定资源根目录：

WebSettings = { 
    DefaultEncoding = "utf-8",
    ResourcePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")
}

• 确保图片文件存在于指定路径，且wkhtmltopdf进程有读取权限。

额外优化建议 #

• 优先使用内联CSS，避免外部样式表加载问题；
• 生成PDF前，将渲染后的HTML保存为本地文件，在浏览器中打开验证样式和图片是否正常；
• 升级DinkToPdf和wkhtmltopdf到最新版本，解决版本兼容问题。

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