Different preview result from official Demo

GroupDocs.Viewer Product Family
, ,
1

Hi Team,

I’m trying to preview an excel file using GroupDocs.Viewer-for-.NET-UI, but the preview for the file is split into multiple pages (p1.html, p2.html, p3.html, p4.html), and the preview result looks messy.

I’m using the default setup, I wonder if I need to do something to be able to view the excel file correctly ?

Uploader:
image.png (30.2 KB)

Preview content:
image.png (16.7 KB)

Html content:
image.png (82.7 KB)

I tried to preview the same file in the official demo here : View documents online | Free GroupDocs Apps
And it’s working correctly, the file is generated as one page and it’s neat:

Preview content:
image.png (43.1 KB)

Html content:
image.png (179.8 KB)

Does the official demo, processed the file first or has specific setup? How do I achieve the same result like the official demo?

2

@kvnp1005

This issue should be fixed in the latest version of GroupDocs.Viewer.UI but it you still experiencing this issue please specify the following settings to render a complete worksheet instead of splitting it to a pages:

Program.cs

...
builder.Services
        .AddControllers()
        .AddGroupDocsViewerSelfHostApi(config =>
        {
            config.ConfigureHtmlViewOptions(viewOptions => {
                viewOptions.SpreadsheetOptions = SpreadsheetOptions.ForOnePagePerSheet();
                viewOptions.SpreadsheetOptions.RenderGridLines = true;
                viewOptions.SpreadsheetOptions.RenderHeadings = true;
            });
        })
...
3

Hi @vladimir.litvinchik ,

I am now able to view the spreadsheet correctly, but not exactly how I expected when there are multiple sheets, the sheets now are “split” into multiple pages. Can we maintain the sheets tab and still preview it correctly? Instead of showing it all with multiple pages ?

image.png (12.1 KB)

What we want is like what mentioned here https://docs.groupdocs.com/viewer/net/render-excel-and-apple-numbers-spreadsheets/:
image.png (48.1 KB)

But when we use this, the spreadsheet become broken like before if there are many & long columns.

4

When using options.RenderToSinglePage = true.

I am facing these issues :

  1. The page width is not auto to the file width
  2. Cannot move to the 2nd tab

image.png (36.3 KB)

5

@kvnp1005

Thank you for sharing the updates. Rendering to single page RenderToSinglePage option is not intended to be used with GroupDocs.Viewer.UI as it creates a single HTML document and uses javascript for navigation.

Instead use SpreadsheetOptions.ForOnePagePerSheet(), which provides rendered as a worksheet tabs as shown on the screenshot:

rendering-one-page-per-sheet.png1918×1128 148 KB

Here is the viewer-net-ui.zip (16.0 KB) sample application that was used.

Please let me know if it works as expected.

6

Hi @vladimir.litvinchik , thanks for your response.

I’m sorry for the confusion, previously I was testing out using GroupDocs.Viewer-NET.UI, but then I need to made some adjustments and decided not to use GroupDocs.UI, instead I’m following the example project, GroupDocs.Viewer for .NET ASP.NET MVC

And for the view I made some customization using the angular client here:
client

How do I include the recent fixes and achieve the same result like yours using this approach ?

7

@kvnp1005

Not a problem at all. The MVC demo was build upon GroupDocs.Viewer.UI and uses the same ideas but adopted to ASP.NET MVC 5 framework. You have to apply the following changes in Global.asax.cs file and replace

var viewerConfig = ViewerConfig.Instance
    .SetLicensePath(licensePath);

with

var viewerConfig = ViewerConfig.Instance
    .SetLicensePath(licensePath)
    .ConfigureHtmlViewOptions(setupOptions =>
    {
        setupOptions.SpreadsheetOptions = SpreadsheetOptions.ForOnePagePerSheet();
        setupOptions.SpreadsheetOptions.RenderGridLines = true;
        setupOptions.SpreadsheetOptions.RenderHeadings = true;
    });

The sample application with this changes: viewer-mvc-demo.zip (496.4 KB)