Free Support Forum - groupdocs.com

Inconsistent HTML generation using .NET document editing API

Hi Team,

I have a new question. We have managed to create a proof of concept using the trial license of GroupDocs.Editor as per our previous thread (Unable to compile document editing WebForms application).

In the test application we are trying to edit a sample document that is typical in structure and complexity to our client’s requirements. I have observed some inconsistencies when generating the HTML (via the GetBodyContent()) method as follows:

The partially generated HTML looks like this:

<div class="documentMainContent">
  <div class="Section1">
    <p class="Normal">
      <span id="text001">Created with evaluation version of GroupDocs.Editor � Aspose Pty Ltd 2001-2021. All Rights Reserved.</span>
    </p>
    <div class="Heading1" id="div001">
      <span id="text002">
        <img id="img001" src="./Source/TempResources/Picture 2.jpeg" width="323" height="123" />
      </span>
      <span id="text003">client </span>
      <span id="text004">Bank </span>
      <span id="text005">plc</span>
    </div>
    <p class="Normal" id="para001">
      <span id="text006">
        <img id="img002" src="./Source/TempResources/Picture 4.png" width="128" height="58" />
      </span>
      <span id="text007"> PO Box 6379</span>
    </p>
    <p class="Normal" id="para002">
      <span id="text008">Milton Keynes, MK10 </span>
      <span id="text009">1DE</span>
    </p>
    <p class="Normal" id="para003">
      <span id="text010">T </span>
      <span id="text011">+44 (0) 80 0029 3994</span>
    </p>
    <p class="Normal" id="para004">
      <span id="text012">T </span>
      <span id="text013">+44 (0) 20 7070 6960</span>
    </p>
    <p class="Normal" id="para005">
      <span id="text014">E </span>
      <a href="mailto:&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#103;&#97;&#116;&#101;&#104;&#111;&#117;&#115;&#101;&#46;&#115;&#101;&#114;&#118;&#105;&#99;&#105;&#110;&#103;&#64;&#103;&#97;&#116;&#101;&#104;&#111;&#117;&#115;&#101;&#98;&#97;&#110;&#107;&#46;&#99;&#111;&#109;">
        <span id="text015">client.servicing@clientbank.com</span>
      </a>
    </p>
    <p class="Normal" id="para006">
      <span id="text016">W </span>
      <a href="http://www.clientbank.com/">
        <span id="text017">www.clientbank.com</span>
      </a>
    </p>
    <p class="Normal" id="para007">
      <span>Buy To Let Purchase Plan &#8211; Financial Information Statement</span>
    </p>
    <p class="Normal" id="para008">
      <span id="text018">&#160;</span>
    </p>
    <table cellspacing="0" cellpadding="0" style="width: 912.3pt; border-collapse: collapse;">
      <tr style="height: 13.2pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: 'Gill Sans MT Std Book'; font-weight: bold;">Error! Not a valid filename.</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.85pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.2pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.85pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.2pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.85pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold; color: rgb(255, 0, 0);">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
      <tr style="height: 13.85pt;">
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
        <td style="width: 445.35pt; padding-right: 5.4pt; padding-left: 5.4pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">&#160;</span>
          </p>
        </td>
      </tr>
    </table>
    <p class="Normal" id="para009">
      <span id="text019">&#160;</span>
    </p>
    <table cellspacing="0" cellpadding="0" style="width: 504pt; border: 0.75pt solid rgb(0, 0, 0); border-collapse: collapse;">
      <tr style="height: 12.25pt;">
        <td style="width: 492.45pt; border-bottom-style: solid; border-bottom-width: 0.75pt; padding-right: 5.03pt; padding-left: 5.03pt; vertical-align: top; background-color: rgb(33, 156, 147);">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold; color: rgb(255, 255, 255);">Personalised Financial Product Switch Information Statement For:</span>
          </p>
        </td>
      </tr>
      <tr>
        <td style="width: 492.45pt; border-top-style: solid; border-top-width: 0.75pt; padding-right: 5.03pt; padding-left: 5.03pt; vertical-align: top;">
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">Account Number: </span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">Property Address: </span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="">&#160;</span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">Date Produced: </span>
            <span style="">15 March 2021</span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="font-family: Calibri; font-weight: bold;">Date Valid Until:</span>
            <span style="font-family: Calibri; font-weight: bold;">&#160; </span>
            <span style="font-family: 'Gill Sans MT'; font-size: 10pt;">&#171;FIRST_PAY_DATE&#187; </span>
            <span style="">&#160;</span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 10pt;">
            <span style="">&#171;DUM_EXP_DATE&#187;</span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="">&#160;</span>
          </p>
          <p style="margin-top: 0pt; margin-bottom: 0pt; font-size: 11pt;">
            <span style="">This is not a legally binding finance offer and it does not oblige client Bank PLC to provide you with the Buy To Let Purchase Plan described in this illustration.</span>
            <span style="">&#160; </span>
          </p>
        </td>
      </tr>
    </table>

Up until the ‘FIRST_PAY_DATE’ text the style and font family is generating correctly. After this point, some (not all!) of the font family style tags are not generating and therefore the resulting document is falling back to use default font. For instance in the source document the text ‘DUM_EXP_DATE’ is also in ‘Gill Sans MT’ font, but as you can see from the above this is not being reflected in the generated HTML. The next sentence starting with “This is not a legally binding…” should also be styled with “font-family: Calibri;”, but as you can see this is missing.

Question: is this a limitation of the trail license or is there another problem with the engine?

Thank you
Kind regards
Gabor

1 Like

@sgbrUnisys

No, if the trial license is applied properly and you are not getting any evaluation mark in the resultant file then it’s not a limitation. However, in order to investigate this scenario, we may need the problematic file from you. Could you please share that? Also share the sample code and we assume that you are using latest API version (21.1.1).

Hi Atir, thanks for the prompt reply.

I am still using the evaluation license as I am getting the evaluation mark: “Created with evaluation version of GroupDocs.Editor � Aspose Pty Ltd 2001-2021. All Rights Reserved.” Do I need to speak to George to get a proper trial license?

Yes, I am using v21.1.1.0. If I see the same problems with a proper trial license then I will be able to share the source file with you. I’ll speak to George and let you know.

Thank you
Kind regards
Gabor

1 Like

@sgbrUnisys

Yes, please avail a temporary license and let us know if issue persists.

Hi Atir

Thank you for the reply. I have now tested the code with the full license, however, we are still seeing the problems in the generated HTML. George now has a copy of our template and I have asked him to pass this to you privately (not here via the public forum).

Here is a sample of the load document code - in case you need this to reproduce the issues:

        private void LoadDocument()
        {
        var filesDirectory = editorConfiguration.GetFilesDirectory();
        var documentName = GetSelectedDocument(editorConfiguration.GetDefaultDocument());
        var documentPath = Path.Combine(filesDirectory, documentName);
        var tempResourcesFolder = string.Concat(editorConfiguration.GetTempResourcesDirectory(), "/");
        var cssResources = "";

        using (Editor editor = new Editor(documentPath))
        {
            // Obtain editable document from original DOCX document
            WordProcessingEditOptions editOptions = new WordProcessingEditOptions();
            editOptions.FontExtraction = FontExtractionOptions.ExtractAll;
            
            EditableDocument editableDocument = editor.Edit(editOptions);
            List<CssText> stylesheets = editableDocument.Css;
            List<IImageResource> images = editableDocument.Images;
            List<FontResourceBase> fonts = editableDocument.Fonts;

            var iteration = 0;

            foreach (CssText oneStylesheet in stylesheets)
            {
                var cssResource = string.Concat(workingDocumentId, "_", iteration.ToString(), ".css");
                oneStylesheet.Save(Path.Combine(filesDirectory, "TempResources\\", cssResource));
                cssResource = string.Concat(tempResourcesFolder, cssResource);
                if (string.IsNullOrEmpty(cssResources))
                {
                    cssResources = cssResource;
                }
                else { 
                    cssResources = string.Concat(cssResources, ",", cssResource);
                }
                iteration++;
            }

            foreach (IImageResource oneImage in images)
            {
                var imgPath = Path.Combine(filesDirectory, "TempResources\\", oneImage.FilenameWithExtension);
                if (File.Exists(imgPath))
                {
                    File.Delete(imgPath);
                }
                oneImage.Save(imgPath);
            }

            foreach (FontResourceBase oneFont in fonts)
            {
                var fontPath = Path.Combine(filesDirectory, "TempResources\\", oneFont.FilenameWithExtension);
                if (File.Exists(fontPath))
                {
                    File.Delete(fontPath);
                }
                oneFont.Save(fontPath);
            }

            WYSIWYG_Editor.EditorWysiwygModeCss = cssResources;
            WYSIWYG_Editor.XHTML = editableDocument.GetBodyContent(tempResourcesFolder);
            editableDocument.Dispose();
        }

If you inspect in debug mode the response from editableDocument.GetBodyContent(tempResourcesFolder) call, you’ll see the unformatted HTML showing the above mentioned formatting problems.

Looking forward hearing from you.
Thank you
Kind regards
Gabor

1 Like

@sgbrUnisys

Thank you for sharing the details. This issue is reproduced at our end. Hence, it’s been logged in our internal issue tracking system with ID EDITORNET-2034. We’ll notify you as there’s any update.