CODEWITHSUNDEEP
c#htmlpdfhtml-rendererpdfsharpcore
user329540
user329540

Reputation: 63

Html to PDF render, headers with rotated text via css not working

I am using HtmlRendererCore.PdfSharp(1.0.5) via c# .net, to convert an html table to PDF. The conversion works fine, as in it renders the table in the pdf. The issue is that the table has column headers rotated as shown in the image below. When I trace the code the html is correct as shown below. enter image description here

However when it renders it to pdf it does not keep the rotated text. It changes as follows see image below. enter image description here Please see html below:

<!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>

Please see c# code below, where this is the htmlrenderer call PdfGenerator.GeneratePdf.

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();
    }
}

Does anyone perhaps know how to achieve this, or is this an issue with the open source tool, any assistance appreciated or if anyone can advise of an open source free tool that can achieve this, that works similar to this tool.

Thank you in advance.

Upvotes: 0

Views: 51

Answers (0)

Related Questions