We're sorry Aspose doesn't work properply without JavaScript enabled.

Free Support Forum - aspose.com

Wrong <table> style after converting to PNG

Hi, support!
I’m trying to convert html to image with CSS style. Save it to stream. Insert into and display on webpage.

But after converting

looks very BOLD and with wrong style.
Before converting with only html+css - all fine.

What i want to receive:
before_convert.png (38.1 KB)

What i receiving:
after.png (6.0 KB)

Here’s example of my C# code:

        public sealed class TableConverter
            {
                private static readonly ImageSaveOptions saveOptions;

                private static readonly string css; //below code <style></style>

                static TableConverter()
                {
                    //CSS
                css = LoadCSS();

                //Save Options
                saveOptions = new ImageSaveOptions(ImageFormat.Png)
                    {
                        BackgroundColor = Color.Transparent,
                        HorizontalResolution = 80,
                        VerticalResolution = 80,
                    };

                saveOptions.PageSetup.PageLayoutOptions = PageLayoutOptions.FitToContentHeight;
            }

            
            public static string ConvertTableToImg(string htmlTable, int tablePosition)
            {
                try
                {
                    string htmlImg;

                    string str = css + CreateHtmlContainer(htmlTable);

                    using (var document = new HTMLDocument(str, String.Empty))
                    {
                        using(var streamProvider = new MemoryStreamProvider())
                        {                     
                            //with File same result
                            Converter.ConvertHTML(document, saveOptions, streamProvider);
                            //Converter.ConvertHTML(document, saveOptions, "path");

                            Stream imageStream = streamProvider.Streams.First();
                            
                            htmlImg = "<img src='data:image/png;base64," + ConvertToBase64String(imageStream) + "'/>";
                        }
                    }

                    logger.Debug("Table conversion at [" + tablePosition + "] postion finished");

                    return htmlImg;
                }
                catch (System.Exception ex)
                {
                    logger.Error("Table conversion at [" + tablePosition + "] position error: \n" + ex);
                    return "<img src=''/>";
                }
            }

Here’s example of my HTML code:

    <body>
      <div class="main-content">
        <section>
          <div class="chapter_container">
            <div class="section_container">
              <div class="topic_container">
                <div class="body">
                  <div>
                    <table class="table" style="table-layout:fixed; ">
                      <col width="1.0*" />
                      <col width="1.0*" />
                      <col width="1.0*" />
                      <!--thead-->
                      <thead>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                      </thead>
                      <!--tbody-->
                      <tbody>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                        <!--row-->
                        <tr>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                          <!--entry-->
                          <td style="" columnName="Table in a Extra page width paragraph" class="entry ">
                            <div>Table in a Extra page width paragraph</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div class="body">
              </div class="topic_container">
            </div class="section_container">
          </div class="chapter_container">
        </section>
      </div class="main-content">

Here’s my CSS code:

    <style>
      pre {
        margin-left: 2em;
        white-space: pre-wrap;
      }

      h2 {
        margin: 3em 0 1em 0;
      }

      h3 {
        margin: 2.5em 0 1em 0;
      }

      h4 {
        margin: 2.5em 0 0.75em 0;
      }

      h5,
      h6 {
        margin: 2.5em 0 1em;
      }

      h1+h2,
      h1+h2+h2,
      h1+p,
      h1+p+h2 {
        margin: 0.75em 0 0.75em;
      }

      h2+h3,
      h3+h4,
      h4+h5,
      h5+h6 {
        margin-top: 0.5em;
      }

      p {
        margin: 1em 0;
      }

      hr:not(.top) {
        display: block;
        background: none;
        border: none;
        padding: 0;
        margin: 2em 0;
        height: auto;
      }

      .element dd,
      .element dl {
        margin-top: 0em;
        margin-bottom: 0.25em;
      }

      dt {
        margin-top: 0.75em;
        margin-bottom: 0.5em;
        clear: left;
      }

      .element dt {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }

      dt+dt {
        margin-top: 0;
      }

      dd dt {
        margin-top: 0.25em;
        margin-bottom: 0;
      }

      dd p {
        margin-top: 0;
      }

      dd dl+p {
        margin-top: 1em;
      }

      dd table+p {
        margin-top: 1em;
      }

      p+*>li,
      dd li {
        margin: 1em 0;
      }

      dt,
      dfn {
        font-weight: bold;
        font-style: normal;
      }

      i,
      em {
        font-style: italic;
      }

      dt dfn {
        font-style: italic;
      }

      pre,
      code {
        font-size: inherit;
        font-family: monospace;
        font-variant: normal;
      }

      pre strong {
        color: black;
        font: inherit;
        font-weight: bold;
        background: yellow;
      }

      pre em {
        font-weight: bolder;
        font-style: normal;
      }

      @media screen {
        code {
          color: #D93B00;
        }

        code a:link,
        code a:visited {
          color: inherit;
        }
      }

      var {
        background-color: #f9f9f9;
        border: 1px solid #eee;
        padding: 0 2px;
      }

      var sub {
        vertical-align: bottom;
        font-size: smaller;
        position: relative;
        top: 0.1em;
      }

      table {
        border-collapse: collapse;
        border-style: hidden hidden none hidden;
      }

      table thead,
      table tbody {
        border-bottom: solid;
      }

      table tbody th:first-child {
        border-left: solid;
      }

      table tbody th {
        text-align: left;
      }

      table td,
      table th {
        border-left: solid;
        border-right: solid;
        border-bottom: solid thin;
        vertical-align: top;
        padding: 0.2em;
      }

      h4 {
        position: relative;
        z-index: 3;
      }

      h4+.element,
      h4+div+.element {
        margin-top: -2.5em;
        padding-top: 2em;
      }

      .element {
        background: #F4F4FA;
        color: black;
        margin: 0 0 1em 0.15em;
        padding: 0 1em 0.25em 0.75em;
        border-left: solid #9999FF 0.25em;
        position: relative;
        z-index: 1;
      }

      .element:before {
        position: absolute;
        z-index: 2;
        top: 0;
        left: -2.05em;
        height: 2em;
        width: 1.8em;
        background: #F4F4FA;
        content: ' ';
        border-style: none none solid solid;
        border-color: #9999FF;
        border-width: 0.25em;
      }

      svg a:link,
      svg a:visited {
        cursor: pointer;
      }

      svg a text,
      svg text a {
        fill: blue;
        /* Even for text, SVG uses fill over color */
        text-decoration: underline;
      }

      svg a:hover,
      svg a:active {
        outline: dotted 1px blue;
      }

      /******************************************************************************/
      /*                                   Body                                     */
      /******************************************************************************/
      body {
        counter-reset: example figure issue;
        /* Layout */
        margin: 0 auto;
        /* Typography */
        line-height: 1;
        font-family: Calibri light;
        font-size: 8pt;
        widows: 2;
        orphans: 2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        /* Colors */
        color: black;
      }

      @media screen {

        html,
        body,
        .front-page,
        .main-content {
          width: 100%;
        }

        nav {
          height: 100%;
        }

        .front-page {
          height: 100vh;
        }

        .main-content {}
      }

      /** ToC Sidebar *************************************************************/
      @media screen {

        html,
        body {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }

        body #toc {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          width: 90mm;
          text-decoration: none;
          overflow: auto;
          scrollbar-width: thin;
          padding: 0 0 0 3mm;
          background-color: #5e5b5b;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          z-index: 100;
        }

        body #toc a {
          text-decoration: none;
          color: #000;
        }

        body #toc ol {
          padding: 0;
          list-style: none;
        }

        body #toc li.chapter-title {
          margin-top: 6mm;
        }

        body #toc li.chapter-title>a {
          /*color: #fdc300;*/
          color: #e8e8e6;
          font-family: Calibri light;
          font-size: 12pt;
          font-weight: bold;
          word-wrap: break-word;
          display: block;
          text-indent: -3mm;
          margin-left: 1mm;
        }

        body #toc li.section-title>a {
          padding-left: 3mm;
          color: #e8e8e6;
          font-family: Calibri light;
          font-size: 12pt;
          word-wrap: break-word;
          display: block;
          text-indent: -6mm;
          margin-left: 2mm;
        }

        body #toc li.topic-title>a {
          padding-left: 3mm;
          color: #e8e8e6;
          font-family: Calibri light;
          font-size: 10pt;
          word-wrap: break-word;
          display: block;
          text-indent: -8mm;
          margin-left: 7mm;
        }

        #tocShowBtn {
          position: absolute;
          top: 50%;
          height: 5mm;
          width: 5mm;
          background-color: #787474;
          cursor: pointer;
          background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+DQoJPGRlZnM+DQoJCTxjbGlwUGF0aD4NCgkJCTxwYXRoIGZpbGw9IiMwMGYiIGZpbGwtb3BhY2l0eT0iLjUxNCIgZD0ibS03IDEwMjQuMzZoMzR2MzRoLTM0eiIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8Y2xpcFBhdGg+DQoJCQk8cGF0aCBmaWxsPSIjYWFkZTg3IiBmaWxsLW9wYWNpdHk9Ii40NzIiIGQ9Im0tNiAxMDI4LjM2aDMydjMyaC0zMnoiLz4NCgkJPC9jbGlwUGF0aD4NCgk8L2RlZnM+DQoJPHBhdGggZD0ibTM0NS40NCAyNDguMjlsLTE5NC4yOSAxOTQuMjhjLTEyLjM1OSAxMi4zNjUtMzIuMzk3IDEyLjM2NS00NC43NSAwLTEyLjM1NC0xMi4zNTQtMTIuMzU0LTMyLjM5MSAwLTQ0Ljc0NGwxNzEuOTEtMTcxLjkxLTE3MS45MS0xNzEuOWMtMTIuMzU0LTEyLjM1OS0xMi4zNTQtMzIuMzk0IDAtNDQuNzQ4IDEyLjM1NC0xMi4zNTkgMzIuMzkxLTEyLjM1OSA0NC43NSAwbDE5NC4yOSAxOTQuMjhjNi4xNzcgNi4xOCA5LjI2MiAxNC4yNzEgOS4yNjIgMjIuMzY2IDAgOC4wOTktMy4wOTEgMTYuMTk2LTkuMjY3IDIyLjM3MyIgdHJhbnNmb3JtPSJtYXRyaXgoLjAzNTQxLS4wMDAxMy4wMDAxMy4wMzU0MSAyLjk4IDMuMDIpIiBmaWxsPSIjZmZmIi8+DQo8L3N2Zz4=');
        }

        #tocHideBtn {
          position: absolute;
          top: calc(50% + 6mm);
          height: 5mm;
          width: 5mm;
          background-color: #787474;
          cursor: pointer;
          background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIgMjIiPg0KCTxkZWZzPg0KCQk8Y2xpcFBhdGg+DQoJCQk8cGF0aCBmaWxsPSIjMDBmIiBmaWxsLW9wYWNpdHk9Ii41MTQiIGQ9Im0tNyAxMDI0LjM2aDM0djM0aC0zNHoiLz4NCgkJPC9jbGlwUGF0aD4NCgkJPGNsaXBQYXRoPg0KCQkJPHBhdGggZmlsbD0iI2FhZGU4NyIgZmlsbC1vcGFjaXR5PSIuNDcyIiBkPSJtLTYgMTAyOC4zNmgzMnYzMmgtMzJ6Ii8+DQoJCTwvY2xpcFBhdGg+DQoJPC9kZWZzPg0KCTxwYXRoIGQ9Im0zNDUuNDQgMjQ4LjI5bC0xOTQuMjkgMTk0LjI4Yy0xMi4zNTkgMTIuMzY1LTMyLjM5NyAxMi4zNjUtNDQuNzUgMC0xMi4zNTQtMTIuMzU0LTEyLjM1NC0zMi4zOTEgMC00NC43NDRsMTcxLjkxLTE3MS45MS0xNzEuOTEtMTcxLjljLTEyLjM1NC0xMi4zNTktMTIuMzU0LTMyLjM5NCAwLTQ0Ljc0OCAxMi4zNTQtMTIuMzU5IDMyLjM5MS0xMi4zNTkgNDQuNzUgMGwxOTQuMjkgMTk0LjI4YzYuMTc3IDYuMTggOS4yNjIgMTQuMjcxIDkuMjYyIDIyLjM2NiAwIDguMDk5LTMuMDkxIDE2LjE5Ni05LjI2NyAyMi4zNzMiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0ibWF0cml4KC0uMDM1NDEtLjAwMDEzLS4wMDAxMy4wMzU0MSAxOS4wMiAzLjAyKSIvPg0KPC9zdmc+');
        }

        #tocNavBtnsBar {
          position: fixed;
          width: 5mm;
          height: 100%;
          left: 0mm;
          margin-left: 90mm;
          background-color: #5e5b5b;
          z-index: 150;
        }

        body main {}

        .activeHeaderTitle>a {
          font-weight: bold;
          color: #fdc300 !important;
        }

        /***** front-page *****/
        .front-page>div {
          margin-left: 95mm;
        }

        .front-page>div.title1 {
          position: absolute;
          left: 3mm;
          top: 6mm;
          font-family: Calibri light;
          font-size: 14pt;
          color: #000;
          z-index: 10;
        }

        .front-page>div.title2 {
          position: absolute;
          left: 0;
          top: 8mm;
          right: 0;
          text-align: center;
          font-family: Calibri light;
          font-size: 20pt;
          font-weight: bold;
          color: #e8e8e6;
          z-index: 10;
        }

        .front-page>div.product-image {
          position: absolute;
          left: 0;
          top: 27mm;
          right: 0;
          bottom: 0;
          text-align: center;
          overflow: hidden;
          z-index: 5;
        }

        .front-page>div.version-block {
          position: absolute;
          left: 3mm;
          bottom: 6mm;
          z-index: 10;
        }

        .front-page>div.copyright {
          position: absolute;
          left: 0;
          bottom: 6mm;
          right: 0;
          text-align: center;
          z-index: 10;
        }

        .front-page>div.footer-image {
          position: absolute;
          bottom: 0;
          right: 0;
        }

        .main-content section {
          left: 0;
          top: 9mm;
          right: 0;
          bottom: 0;
          margin-left: 95mm;
        }

        /***** header of main content *****/
        .main-content header,
        .static-top-header {
          height: 9mm !important;
          margin-left: 95mm;
          border-bottom: 1pt solid #fdc300;
          z-index: 10;
        }

        .static-top-header {
          position: fixed;
          height: 9mm;
          width: calc(100% - 95mm);
          box-sizing: border-box;
          z-index: 50;
          /*border: 2px solid pink;*/
          line-height: 9mm;
          background-color: white;
        }

        .main-content header img {
          height: 7mm;
          float: right;
        }

        .main-content header nav,
        .static-top-header {
          height: 100%;
          display: inline-block;
          vertical-align: middle;
          font-family: Calibri light;
          font-size: 14pt;
          color: #000000;
          padding-left: 4mm;
        }

        .main-content header nav ul {
          padding: 0;
          margin: 0;
          line-height: 9mm;
        }

        .main-content header nav li {
          display: inline-block;
        }

        .main-content header nav li a {
          display: block;
          text-decoration: none;
        }

        /***** content elements *****/
        .section_container {
          margin-left: 3mm;
        }

        .section_title {
          margin-left: 2mm;
          margin-top: 2.4722222222mm
            /*6mm-10pt*/
          ;
          font-family: Calibri light;
          font-size: 14pt;
          color: #000;
        }

        .topic_title {
          margin-left: 2mm;
          margin-top: 4.4722222222mm
            /*8mm-10pt*/
          ;
          font-family: Calibri light;
          font-size: 12pt;
          color: #000;
        }

        .topic_container .body {
          margin-top: 3.47222mm
            /*7mm-10pt*/
          ;
          font-family: Calibri light;
          font-size: 10pt;
          color: #000;
        }

        .topic_container .body a {
          font-family: Calibri light;
          font-size: 8pt;
          font-weight: bold;
          color: #e57002;
        }

        .topic_container .body img.image {
          margin-top: 4mm;
        }

        .topic_container .body table.table {
          margin-top: 4mm;
          max-width: 161mm;
          font-family: Calibri light;
          font-size: 8pt;
          color: #000;
        }

        .topic_container .body .entry_header_attributes {
          font-family: Calibri light;
          font-size: 8pt;
          font-weight: bold;
          color: #000;
        }

        /** Note *************************************************************/
        table.icons_wrap {
          border: 0.5pt solid rgb(255, 191, 0);
          width: 100%;
        }

        table.icons_wrap td,
        table.icons_wrap th {
          border: none;
        }

        table.icons_wrap thead,
        table.icons_wrap tbody {
          border: none;
        }
      }
    </style>

@Kruzer

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): HTMLNET-4254

You can obtain Paid Support services if you need support on a priority basis, along with the direct access to our Paid Support management team.