Image not visible when converting XLSX to HTML in .NET

GroupDocs.Viewer Product Family
,
1

An embedded image is not visible after converting the attached XLSX files to HTML.
When opening the generated HTML in Chrome or Firefox shows the fine, but in our embedded browser control one of the images is not shown.
After analyzing the HTML, we found out this problem was coming from a TD element being on the same z-index as the image.
The image “image000”, or to be more specific the SPAN containing this image has a z-index of 0:
image.png (3.2 KB)

This is also the default for the TD element (as nothing is specified there).
Now it is up to the browser to decide if the image is above or below the TD.
In our case, it’s unfortunately below…
You can see here the image not being visible:
td overlapping.png (88.5 KB)
And here you can see it visible, because transparency was added to the TD element:
td transparent.jpg (206.8 KB)

We would recommend starting z-index for images at 1 and not at 0 when generating the HTML,
but we’re also happy with any other solution that resolves this issue.
We were using GroupDocs.Viewer 21.8 to generate this HTML, but the same problem seems to happen with 21.9.
Excel z-index overlapping.zip (1.9 MB)

2

Hi @Clemens_Pestuka

What is your embedded browser? Might you provide sample application with that control?

3

@Clemens_Pestuka

Embedded browser control - likely Internet explorer, but very good to look at original sample application with your real control.

4

@Clemens_Pestuka

This is high image viewed in my IE (not EDGE!)

Image visible, but shifted.

5

@Clemens_Pestuka

We suggest you code for workaround:

using (Viewer viewer = new Viewer("0209000652.xlsx"))
{
    ViewOptions viewOptions = HtmlViewOptions.ForEmbeddedResources(
        (pageNumber) => new MemoryStream(),
        (pageNumber, pageStream) => {
            var stream = (MemoryStream)pageStream;
            var html = Encoding.UTF8.GetString(stream.ToArray());
            html = html.Replace("<img", "<img style='z-index: 1;'");
            File.WriteAllText($"p-{pageNumber}.html", html);
        });
    viewOptions.SpreadsheetOptions = SpreadsheetOptions.ForOnePagePerSheet();
    viewer.View(viewOptions, 1);
}

This is sample application:
sample_app.zip (1.9 MB)

1 Like
6

@Clemens_Pestuka

I logged your issue in VIEWERNET-3600 for further investigation. In case in any update I will reply here.

1 Like
7

Hi @mikhail.evgrafov.aspose,

Thank you for the workaround with sample :+1:
We are using CefSharp as embedded browser (which uses Chromium).
I checked the behavior with a CefSharp sample application now and noticed the image is indeed visible.
So it somehow has to come from our code that loads the html pages.
I will double check with one Web Development if they can fix the problem and I’ll use your workaround otherwise.

8

@Clemens_Pestuka

You are welcome.