HtmlRendererCore.PdfSharp转PDF时旋转表头CSS失效问题求助

使用C# .NET的HtmlRendererCore.PdfSharp(v1.0.5)将HTML表格转换为PDF时，表格整体功能正常，但通过CSS设置旋转的表头文本在生成的PDF中未保留旋转效果——HTML页面中表头旋转显示正常，PDF输出后表头文本恢复为水平状态。

相关HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            page-break-inside: avoid;
            border: none;
        }
        h1,h3 {
            font-family: arial, sans-serif;

        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 4px;
        }
            th.rotated-text {
                align-content: end;
                text-align: center;
                white-space: nowrap;
                padding: 0 !important;
                color: var( --color-lfb-red);
            }

                th.rotated-text > div {
                    display: inline-block;
                    writing-mode: vertical-rl;
                    transform: rotate(180deg);
                }

                    th.rotated-text > div > span {
                        padding: 3px;
                    }
    </style>
</head>
<body>
    <div style="margin:10px">
        <h1 class="title">Employees</h1>

 
        <table style="margin-top:20px;" id="training">
         
  
               <tbody>
                   <tr><td style="background-color:cornflowerblue; font-size:24px;font-weight:bold;" colspan = "7" > Training team</td></tr><tr><th style = "background-color:lightblue;font-size:14px; font-weight-bold"> Class</th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Roy Bloggs</span> </div> </th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Mickey Mouse</span> </div> </th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Donald Duck</span> </div> </th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Iron Man</span> </div> </th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Mini Mouse</span> </div> </th><th class="rotated-text" style = "background-color:lightblue; font-size:14px;font-weight-bold; "> <div><span>Super Man</span> </div> </th></tr>
              </tbody>
    
        </table>
    </div>
</body>
</html>

C#转换代码 #

public static byte[] GeneratePdf(this string html, int pageType)
{
    using (var stream = new MemoryStream())
    {
      
            PdfGenerateConfig pdfGenerateConfig = new PdfGenerateConfig();
            pdfGenerateConfig.PageSize = PdfSharpCore.PageSize.A4;
            pdfGenerateConfig.PageOrientation = pageType == 1 ? PageOrientation.Landscape : PageOrientation.Portrait;
            pdfGenerateConfig.SetMargins(5);
            var pdf = PdfGenerator.GeneratePdf(html, pdfGenerateConfig);
            pdf.Save(stream);
        
        return stream.ToArray();
    }
}

解决方法与替代工具 #

针对HtmlRendererCore.PdfSharp的临时方案 #

1. 升级版本：v1.0.5属于较老版本，尝试升级到最新版，看是否修复了transform、writing-mode这类CSS变换属性的支持缺陷。
2. 替换CSS写法：如果升级无效，改用兼容性更强的竖排实现方式，比如将文本拆分为单个字符并换行，通过line-height控制间距：

   th.rotated-text > div {
       white-space: pre-line;
       line-height: 1.2;
   }
   

   对应的HTML需要把姓名拆成单个字符（如R<br>o<br>y<br><br>B<br>l<br>o<br>g<br>g<br>s），这种方式能在多数PDF生成器中正常显示竖排效果，但需要额外处理文本内容。

推荐的免费开源替代工具 #

• iText 7 Community：对现代CSS的支持更全面，能正确解析transform和writing-mode属性，协议为LGPL，适合商业项目（需遵守协议条款）。
• PuppeteerSharp：基于Chrome/Chromium无头引擎渲染HTML，完全继承浏览器的CSS支持能力，HTML页面中能显示的旋转效果可1:1还原到PDF，适合复杂样式的场景。
• QuestPDF：采用代码优先的方式构建PDF，无需HTML/CSS，可直接通过API定义旋转表头、表格布局，适合需要精确控制PDF结构的场景。

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