Save to HTML: CSS prefixing incomplete

Using Aspose.Cells for Java, version 17.10.3.

We are saving Excel sheets to HTML. In general, this feature of Aspose.Cells works very well, and we are happy with it.

A web front-end application loads the generated HTML, and displays it in some specific way, by adding the generated HTML to the DOM tree in the browser. Since Aspose.Cells is not aware that the HTML might be loaded inside an existing HTML DOM, it is quite possible that the CSS styles generated and referenced by Aspose Cells have unintended side effects (applying to elements outside the the Aspose HTML).

Happily, we found that Aspose has implemented the “CellCssPrefix” property in the HtmlSaveOptions. Using this almost solves the problem. :grinning:

The problem is that the generated HTML still contains a number of CSS class declarations that are not prefixed. I guess this makes some sense, since the property is called CellCssPrefix, and likely is only used for HTML elements corresponding to cells, the the CSS style classes referenced by those elements.

I found another reply in this forum (see the last two posts of All CSS styles are not prefixed when saving as HTML - #10 by mhill.labvantage) that is effectively reporting the same problem that we are experiencing.

What we’d like to request is an enhancement that either applies the “CellCssPrefix” to all styles, or introduces a separate property to drive the prefixing of styles that are currently unprefixed.

The goal is to be able to generate HTML (with embedded CSS) that is “isolated”, so that the CSS styles declared inside it never apply to other HTML elements than the ones generated by Aspose.

Let me know if the problem is clear, or if I need to provide Excel and HTML generated by the current version of Aspose Cells to demonstrate the problem in more detail.

Thanks in advance,
Taras

@TarasTielkes,

Thanks for providing us some details.

To evaluate your issue/requirements precisely and to log it into our database, kindly provide us a simple Excel file and output HTML file (by Aspose.Cells v17.11.x), also, paste your sample code (runnable), we will check it soon. Moreover, give us your expected HTML file (which you can create by updating output HTML) with some screenshots for comparisons (you may compare current HTML (by Aspose.Cells APIs) Vs expected HTML). All this will helps us to evaluate your issue precisely to consequently figure it out soon.

Hi Amjad,

Sample code:

Workbook workbook = new Workbook(“input.xlsx”);
HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.HTML);
saveOptions.setExportHiddenWorksheet(false);
saveOptions.setExportActiveWorksheetOnly(true);
saveOptions.setCellCssPrefix(“prefix123”);
workbook.save(“output.html”, saveOptions);

I’ve re-ran the code using Aspose.Cells for Java, version 17.11.0.
The attached zip archive contains the Excel input, and the HTML output.

If you inspect the generated HTML, you’ll see that Aspose does not prefix all CSS class declarations with a prefix. Specifically:

tr
{mso-height-source:auto;
mso-ruby-visibility:none;}
col
{mso-width-source:auto;
mso-ruby-visibility:none;}
br
{mso-data-placement:same-cell;}
ruby
{ruby-align:left;}

For example, the class declaration for element “tr” will affect all tr elements in the HTML DOM.

Kind regards,
Taras

html-prefix.zip (7.5 KB)

@TarasTielkes,

Thanks for the template file, sample code and output HTML.

You are right, I noticed the issue (or a sort of limitation) as you mentioned by using your sample code with your template file. I found some CSS class declarations are not prefixed in the output HTML. I have logged a ticket with an id “CELLSJAVA-42465” for your issue/requirements. Our concerned developer will evaluate your issue/requirements and try to figure it out soon (if possible).

Once we have an update on it, we will let you know here.

@TarasTielkes,

We have evaluated your issue further. Well, tr,col and br styles are of type CSS, If we add prefix string to them, these styles cannot be applied to the same type of elements, so we will not add prefix string in front of these type of CSS.

Hi Amjad,

Thanks for the feedback, your evaluation makes sense of course, after I think about it.

What about the following solution: provide a “TableCssId” property on HtmlSaveOptions, which would have the following effect in the generated HTML:

<style>
#myTable tr {

}
</style>
<table id=“myTable”>

</table>

The CSS rules that are not applying to individual cells would be declared as targeting elements inside the element with the provided id. I am assuming here that the result of saving a single worksheet would always result in a single HTML table tag.

@TarasTielkes,

Thanks for providing us your proposed solution.

I have logged your findings against your issue “CELLSJAVA-42465” into our database. Our concerned developer from product team will evaluate your suggestion if we could support your needs.

Once we have an update on it, we will let you know here.

@TarasTielkes,

This is to inform you that we have fixed your issue (logged earlier as “CELLSJAVA-42465”) now. We will soon provide you the fix after performing QA and including other enhancements and fixes.

@TarasTielkes,

Please try our latest version/fix: Aspose.Cells for Java v17.11.7.

Please note:

  1. We add HtmlSaveOptions.TableCssId property which gets and sets the prefix of the type css name such as, tr,col,td and so on, they are contained in the table element. It has the specific TableCssId attribute. The default value is “”.

The Java sample code is as following:
e.g
Sample code:

Workbook workbook = new Workbook(filePath + "input.xlsx"); 
HtmlSaveOptions saveOptions = new HtmlSaveOptions(SaveFormat.HTML); 
saveOptions.setExportHiddenWorksheet(false);
saveOptions.setExportActiveWorksheetOnly(true);
saveOptions.setCellCssPrefix("cellStylePrefix");
saveOptions.setTableCssId("tableIdPrefix");
workbook.save(filePath + "out_java.html", saveOptions);

Let us know your feedback.

The issues you have found earlier (filed as CELLSJAVA-42465) have been fixed in Aspose.Cells for Java 17.12 update.

Please also check the following document/blog for your reference: