Docx report issues

[EmiliaChovancova]

Reports generated in docx format are not reflecting original formatting. These are the issues found in tables and images.

Tables

• if you choose the table style attribute border = “0” or none and set the style attribute of “border-bottom” to whatever color it doesn’t work in the downloaded docx report. It’s working with HTML version of the downloaded report and it is also working with various html editors but not in the docx format.

HTML downloaded report (working):

Docx format report - not working :(

Steps to reproduce

1. Create a simple table - for example like this:

<table style="border-collapse: collapse; width: 60%; height: 44.7812px; margin-left: auto; margin-right: auto;"><colgroup><col style="width: 33.7296%;"><col style="width: 32.9883%;"><col style="width: 33.2662%;"></colgroup>
<thead>
<tr style="border-bottom: 1px solid rgba(169, 169, 169, 1); border-top: 1px solid rgba(169, 169, 169, 1); height: 22.3906px;">
<th style="color: rgba(238, 0, 0, 1); height: 22.3906px; text-align: left;"><span style="font-size: 10pt;">A</span></th>
<th style="color: rgba(238, 0, 0, 1); height: 22.3906px; text-align: left;"><span style="font-size: 10pt;">B</span></th>
<th style="color: rgba(238, 0, 0, 1); height: 22.3906px; text-align: left;"><span style="font-size: 10pt;">C</span></th>
</tr>
</thead>
<tbody>
<tr style="height: 22.3906px;">
<td style="height: 22.3906px;"><span style="font-size: 10pt;">D</span></td>
<td style="height: 22.3906px;"><span style="font-size: 10pt;">E</span></td>
<td style="height: 22.3906px;"><span style="font-size: 10pt;">F</span></td>
</tr>
</tbody>
</table>

2. Generate and download a docx report.

---

Images

• Images in components are not positioned as defined in docx reports - if you choose to set a picture to the right side of the page with attributes like “img style="float: right; margin: 0 0 15px 15px;"” the image is always in a completely different place.

Preview in Cervantes, downloaded HTML report or external HTML editors are working correctly:

But again, the docx report is not working :( image is on the left side of the page even though the parameters were set to the right side:

Steps to reproduce

1. Insert an image to the component
2. Adjust the html code to for example:

<p style="page-break-inside: avoid; margin-bottom: 0.14in; page-break-after: avoid; position: relative;"><img style="float: right; margin: 0 0 15px 15px;" src="blob:https://SourceOfTheImage" width="338" height="310"></span></p>

[mesquidar]

Hi @EmiliaChovancova thanks for reporting this issue I will take it a look and I will let you know :)

Thank you
Best regards

[mesquidar]

Hi @EmiliaChovancova I found the issue it's a known bug on a library used to convert the html code to openxml format I did a downgrade of the library until it's fixed in the nexts days :)

I created a dev image if you want to test it before to commit the changes

git clone https://github.com/CervantesSec/docker.git

• After that you need to start your docker containers:

docker-compose -p cervantes -f docker-compose-dev.yml up -d

Thank you :)
Best regards

[EmiliaChovancova]

Hi @mesquidar, It looks like the functionality is still not working. The library that is used to convert the html to xml declares that it supports “margin”, but even after you downgraded the library the image is still not exactly, where it is supposed to be. I would create an issue with the library as it is not a cervantes bug but the html2openxml library, wdyt?

[EmiliaChovancova]

Hi @mesquidar, wdyt about my proposal?
Thank you :)

[mesquidar]

Hi @EmiliaChovancova sorry I didn't saw your message. Yes sure you can open an issue if you want

I updated the library to new version that dev released and I am making some tests

I created a new dev image if you want to test i too

Thank you :)

[EmiliaChovancova]

Hi @mesquidar, thank you, it looks like the updated version is struggling with images in headers and footers. If the template contains an image in header or a footer the docx report cannot be generated and downloaded.
Here is the log output:

System.NullReferenceException: Object reference not set to an instance of an object. at HtmlToOpenXml.Expressions.ImageExpressionBase.<>c.<IncrementDrawingObjId>b__5_0(HeaderPart f) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/Image/ImageExpressionBase.cs:line 90 at System.Linq.Enumerable.SelectManySingleSelectorIterator`2.MoveNext() at HtmlToOpenXml.Expressions.ImageExpressionBase.IncrementDrawingObjId(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/Image/ImageExpressionBase.cs:line 93 at HtmlToOpenXml.Expressions.ImageExpression.CreateDrawing(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/Image/ImageExpression.cs:line 60 at HtmlToOpenXml.Expressions.ImageExpressionBase.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/Image/ImageExpressionBase.cs:line 31 at HtmlToOpenXml.Expressions.BlockElementExpression.ComposeChildren(ParsingContext context, IEnumerable`1 childNodes, ParagraphProperties paragraphProperties, Action`1 preAction, Action`1 postAction) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 266 at HtmlToOpenXml.Expressions.BlockElementExpression.Interpret(ParsingContext context, IEnumerable`1 childNodes) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 53 at HtmlToOpenXml.Expressions.PhrasingElementExpression.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/PhrasingElementExpression.cs:line 41 at HtmlToOpenXml.Expressions.BlockElementExpression.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 35 at HtmlToOpenXml.Expressions.BlockElementExpression.ComposeChildren(ParsingContext context, IEnumerable`1 childNodes, ParagraphProperties paragraphProperties, Action`1 preAction, Action`1 postAction) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 266 at HtmlToOpenXml.Expressions.BlockElementExpression.Interpret(ParsingContext context, IEnumerable`1 childNodes) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 53 at HtmlToOpenXml.Expressions.PhrasingElementExpression.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/PhrasingElementExpression.cs:line 41 at HtmlToOpenXml.Expressions.BlockElementExpression.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BlockElementExpression.cs:line 35 at HtmlToOpenXml.Expressions.BodyExpression.Interpret(ParsingContext context) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/Expressions/BodyExpression.cs:line 31 at HtmlToOpenXml.HtmlConverter.Parse(String html, ParallelOptions parallelOptions) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/HtmlConverter.cs:line 106 at HtmlToOpenXml.HtmlConverter.Parse(String html) in /Users/olivier/Projects/html2openxml/src/Html2OpenXml/HtmlConverter.cs:line 66 at Cervantes.Web.Controllers.ReportController.DownloadReport(ReportDownloadModel model) in /src/Cervantes.Web/Controllers/ReportController.cs:line 1048

I'll go ahead and create an issue with the library.

Thank you :)

[mesquidar]

Hi @EmiliaChovancova I built a new dev image with new version of html2openxml 3.1.1 that @onizet released

If you want to test it :)

Best regards

[jstangle]

Hi @mesquidar, thank you for the update. I just tested the latest release and it is not crashing. Unfortunately, the images in the header and footer of the HTML are not being displayed in the DOCX report.

[mesquidar]

Hi @jstangle thanks for the feedback. Can you comment the issue in onizet/html2openxml#159 so in this case @onizet can manage it

Thank you :)

[mesquidar]

Hi @jstangle @EmiliaChovancova to give some updates I added now the possibility to add your own CSS in the report components so this makes possible to create more customized reports if you want to test it's already available in the dev image (Keep in mind that some css will not be exported correctly to docx due how openxml styling works)

Thank you :)

[onizet]

Hi @mesquidar, I would suggest that you use PreMailer to inline the CSS on the html elements. More would be considered during the conversion.

[mesquidar]

Hi @onizet yes I am using it to inline the CSS I saw it that you comment it in your documentation

Thank you :)

[mesquidar]

Hi @jstangle @EmiliaChovancova I upgraded the library to the last versions if you want to make some tests it's already a new image available

Thank you @onizet :)

Best regards

[EmiliaChovancova]

Hi @mesquidar, thank you for the update, we will take a look at it:)

Thank you:)