Gembox document HTML to PDF losing details

188 Views Asked by At

I just dowloaded the newset version of gembox document in order to convert ah html file into PDF. It seems to be working, but the resulting PDF is losing some information.

Here is what the HTML looks like:

    <html>
      <head>
        <style>
          .main-container {
            width: 383.62px;
            height: 576.95px;
            text-align: center;
            padding: 96px 48px;
            font-family: Verdana; 
          }
          .code {
            font-size: 25px;
            font-weight: bold;
            letter-spacing: 1px;
          }
          .mrg-btm {
            margin-bottom: 8px;
          }
          .name-and-code {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 3px;
          }
          .flex-div {
            display: flex;
            flex-direction: row;
            width: 100%;
          }
          .distance-one {
            width: 50%;
            text-align: left;
            font-size: 14px;
          }
          .distance-two {
            width: 50%;
            text-align: right;
            font-size: 14px;
          }
          .font-bold {
            font-weight: bold;
          }
          .scadenza {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 3px;
          }
          .data-scadenza {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 2px;
          }
          .materiali {
            font-size: 24px;
            font-weight: bold;
            text-align: left;
            letter-spacing: 5px;
          }
          .last-codes {
            display: flex;
            flex-direction: row;
            font-size: 14px;
            text-align: left;
            font-family: TimesNewRoman; 
          }
          .mrg-btm-two {
            margin-bottom: 64px;
          }
          .mrg-btm-three {
            margin-bottom: 16px;
          }
          .mrg-btm-four {
            margin-bottom: 20px;
          }
          .mrg-rgt-one {
            margin-right: 20px;
          }
          .mrg-rgt-two {
            margin-right: 8px;
          }
          .mrg-rgt-three {
            margin-right: 16px;
          }
        </style>
      </head>
      <body>
        <div class="main-container">
          <div class="code mrg-btm">
            <label>STM0583A0</label>
          </div>
          <div class="name-and-code mrg-btm-four">
            <label>TUNISI&nbsp;&nbsp;0583</label>
          </div>
         <div class="mrg-btm-four">
           <img alt='Barcode Generator TEC-IT'
           src='https://barcode.tec-it.com/barcode.ashx?data=02329747&code=Code39'/>
        </div>
        <div class="flex-div mrg-btm">
          <label class="distance-one">SqA</label>
          <label class="distance-two font-bold">2481m&nbsp;&nbsp;&nbsp;(#13)</label>
        </div>
        <div class="flex-div mrg-btm-three">
          <label class="distance-one">GOMSET1&nbsp;&nbsp;&nbsp;(#2)</label>
          <label class="distance-two">11/10/2022</label>
        </div>
        <div class="scadenza mrg-btm">
            <label>Scadenza</label>
        </div>
        <div class="data-scadenza mrg-btm">
            <label>31/10/2022</label>
        </div>
        <div class="materiali mrg-btm">
            <label>Materiali</label>
        </div>
        <div class="last-codes mrg-btm-two">
            <label class="mrg-rgt-one">RC1812</label>
            <label>000331799805</label>
        </div>
        <div class="last-codes mrg-btm">
            <label class="mrg-rgt-two">SB00040A0</label>
            <label class="mrg-rgt-two">STR1026420</label>
            <label>25/10/2022</label>
        </div>
        <div class="last-codes">
            <label class="mrg-rgt-two">C-1812</label>
            <label class="mrg-rgt-three">RC1812</label>
            <label>000331799805</label>
        </div>
        </div>
      </body>
    </html>

Here is the c# code. I tried several methods but none of them work.


    GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
    DocumentModel document = DocumentModel.Load(filenameHtml);
    document.Save(path + pdfFilename);
    //CODE 2
    GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");
    string body = File.ReadAllText(filenameHtml);
    var htmlLoadOptions = new HtmlLoadOptions();
    using (var htmlStream = new MemoryStream(htmlLoadOptions.Encoding.GetBytes(body)))
    {
    var document = DocumentModel.Load(htmlStream, htmlLoadOptions);
    document.Save(path + pdfFilename);
    }

I tried also setting up some parameters, but in every test, the size of the area of the HTML was lost, the Times New Roman font as well, and also the flex div spacing some elements.

Here is what the original xml looks like:

enter image description here

And here is the result

enter image description here

What can I change to make the Gembox Document output look like the original?

0

There are 0 best solutions below