GroupDocs.Viewer-for-.NET-UI

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #llm #go #android #machine-learning #docker #windows #awesome #vue #security #openai

GroupDocs.Viewer-for-.NET-UI

(★ 12)

UI - User Interface for GroupDocs.Viewer for .NET document viewer and automation API.

GroupDocs.Viewer-for-.NET-UI Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# UI for GroupDocs.Viewer for .NET

![Build Packages](https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET-UI/actions/workflows/build_packages.yml/badge.svg)
![Nuget](https://img.shields.io/nuget/v/groupdocs.viewer.ui?label=GroupDocs.Viewer.UI)
![Nuget](https://img.shields.io/nuget/dt/GroupDocs.Viewer.UI?label=GroupDocs.Viewer.UI)

![GroupDocs.Viewer.UI](https://raw.githubusercontent.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET-UI/main/docs/images/viewer-ui.png)

GroupDocs.Viewer.UI is a feature-rich UI designed to work with [GroupDocs.Viewer for .NET](https://products.groupdocs.com/viewer/net). It enables viewing of popular file and document formats in a web browser.

## Installation and integration

To integrate GroupDocs.Viewer.UI in your ASP.NET Core project:

### Add required packages

Include packages in your project:

```bash
dotnet add package GroupDocs.Viewer.UI
dotnet add package GroupDocs.Viewer.UI.SelfHost.Api
dotnet add package GroupDocs.Viewer.UI.Api.Local.Storage
dotnet add package GroupDocs.Viewer.UI.Api.Local.Cache
```

> **Note**: If you're planning to host your app on Linux, use the `GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform` package.

### Update the `Startup` class

Add the required services and middleware in your `Startup` class:

```cs
var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddGroupDocsViewerUI();

builder.Services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddLocalStorage("./Files")
    .AddLocalCache("./Cache");

var app = builder.Build();

app
    .UseRouting()
    .UseEndpoints(endpoints =>
    {
        endpoints.MapGroupDocsViewerUI(options =>
        {
            options.UIPath = "/viewer";
            options.ApiEndpoint = "/viewer-api";
        });
        endpoints.MapGroupDocsViewerApi(options =>
        {
            options.ApiPath = "/viewer-api";
        });
    });

app.Run();
```

This configuration registers `/viewer` as the middleware for the Single Page Application (SPA) and `/viewer-api` as the middleware for serving the API.

> **Note**: Ensure the `Files` and `Cache` folders are created manually before running the application.

### Set the license

Optionally, you can specify the license path using the following code or set the environment variable `GROUPDOCS_LIC_PATH`:

```cs
builder.Services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi(config =>
    {
        config.SetLicensePath("GroupDocs.Viewer.lic"); 
    })
```

For more information about trial limitations, refer to the [Licensing and Evaluation](https://docs.groupdocs.com/viewer/net/licensing-and-evaluation/) documentation.

To request a temporary license, visit [GroupDocs.Viewer for .NET](https://products.groupdocs.com/viewer/net/) and click the **Start Free Trial** button.

## UI Overview

The UI is an Angular-based Single Page Application (SPA), the same one used in the [GroupDocs.Viewer App](https://products.groupdocs.app/viewer/total). You can configure the SPA's path by updating the `UIPath` property:

```cs
endpoints.MapGroupDocsViewerUI(options =>
{
    options.UIPath = "/my-viewer-app";
});
```

There are two types of configuration options you can use to customize the UI:  
1. **Customize UI behavior**.  
2. **Show or hide UI controls**.

### Customize UI behavior

Using the following options, you can customize UI behavior:

#### Set Rendering Mode

The UI can display HTML and image files. You can set which mode should be used. By default, the UI is configured to display HTML documents.

```cs
builder.Services
    .AddGroupDocsViewerUI(config =>
    {
        config.RenderingMode = RenderingMode.Image; // Set rendering mode to Image
    });
```

**Important**: When using `Image` mode ensure to set corresponding `ViewerType.Png` or `ViewerType.Jpg` for the self-hosted API:

```cs
builder.Services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi(config =>
    {
        config.SetViewerType(ViewerType.Png); // or ViewerType.Jpg
    })
```

#### Enable Static Content mode

By default, the viewer relies on a backend API that serves information about the file, pages, thumbnails, and the PDF file for printing.  
When `StaticContentMode` is enabled, the app will use pre-generated static content via GET requests.

```cs
builder.Services
    .AddGroupDocsViewerUI(config =>
    {
        config.StaticContentMode = true; // Enable static content mode
    });
```

See this [sample app](./samples/GroupDocs.Viewer.UI.Sample.StaticContentMode/) for more details.  
You can also find the content generator app [here](./samples/GroupDocs.Viewer.UI.Sample.StaticContentMode.Generator).

#### Set the initial file

By default, no file is opened when the application starts. You can specify an initial file to open on startup:

```cs
builder.Services
    .AddGroupDocsViewerUI(config =>
    {
        config.InitialFile = "annual-review.docx";
    });
```

The initial file can also be set using a query string parameter, e.g., `?file=annual-review.docx`.

#### Set number pages to preload

By default, the first three pages of a document are generated when it is opened. To render all pages at once, set `PreloadPages` to `0`:

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.PreloadPages = 0; // Render all pages on open
    });
```

#### Set initial zoom level

By default, the zoom level is not specified and selected by the UI to fit the document if possible. 
The default value can be changed using `InitialZoom` property.

**How Initial Zoom Works**

The viewer sets the initial zoom level based on document orientation and configuration. The goal is to fit the page in the viewport without scrolling.

**Automatic Zoom Behavior (Default)**

When `InitialZoom` is not set:

- **Portrait documents** (height > width):
  - Automatically fits by height
  - Ensures the full page height is visible

- **Landscape documents** (width >= height):
  - Automatically fits by width and height
  - Uses the smaller of the two calculated zoom values
  - Ensures the page fits without horizontal or vertical scrolling

Available zoom levels are:
 
 * `ZoomLevel.FitWidth`
 * `ZoomLevel.FitHeight`
 * `ZoomLevel.Percent25`
 * `ZoomLevel.Percent50`
 * `ZoomLevel.Percent60`
 * `ZoomLevel.Percent70`
 * `ZoomLevel.Percent75`
 * `ZoomLevel.Percent80`
 * `ZoomLevel.Percent90`
 * `ZoomLevel.Percent100`
 * `ZoomLevel.Percent125`
 * `ZoomLevel.Percent150`
 * `ZoomLevel.Percent200`
 * `ZoomLevel.Percent300`

The following code shows how to set default zoom level to fit document by width.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.InitialZoom = ZoomLevel.FitWidth;
    });
```

### Disable context menu

To disable context menu or mouse right click, set `EnableContextMenu` to `false`. By default, feature is enabled.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableContextMenu = false;
    });
```

### Disable hyperlinks

To disable clickable links in document set `EnableHyperlinks` to `false`. By default, links are enabled.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableHyperlinks = false;
    });
```

### Show or hide UI controls

The screenshot below highlights the main UI controls that you can show or hide. By default all the controls are visible.

![GroupDocs.Viewer.UI Controlls](https://raw.githubusercontent.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET-UI/main/docs/images/viewer-ui-controls.png)

You can also completely hide header and toolbar:

#### Hide header

To hide header, set `EnableHeader` to `false`. By default, the header is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableHeader = false; // Hide header
    });
```

#### Hide toolbar

To hide toolbar, set `EnableToolbar` to `false`. By default, the toolbar is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableToolbar = false; // Hide toolbar
    });
```

#### Hide File Name

To hide the file name on the header pane, set `EnableFileName` to `false`. By default, the file name is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableFileName = false; // Hide file name
    });
```

#### Hide thumbnails

To hide thumbnails pane, set `EnableThumbnails` to `false`. By default, this pane is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableThumbnails = false; // Hide thumbnails
    });
```

#### Hide zoom selector

To hide zoom selector in the tools pane, set `EnableZoom` to `false`. By default, this selector is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableZoom = false; // Hide zoom selector
    });
```

#### Hide page selector

To hide the page selector control in the tools pane, set `EnablePageSelector` to `false`. By default, the page selector is enabled.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnablePageSelector = false; // Hide page selector
    });
```

#### Hide Search button

To hide search button in the tools pane, set `EnableSearch` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableSearch = false;
    });
```

> **Note**: Search is not supported when `RenderingMode` is set to `RenderingMode.Image`.

#### Hide Print button

To hide the `Print` button in the tools pane, set `EnableDownloadPdf` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnablePrint = false;
    });
```

#### Hide Download PDF button

To hide the `Download PDF` button in the tools pane, set `EnableDownloadPdf` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableDownloadPdf = false;
    });
```

#### Hide Present button

To hide the `Present` button in the tools pane, set `EnablePresentation` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnablePresentation = false;
    });
```

#### Hide Open File button

To hide `Open File` button, set `EnableFileBrowser` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableFileBrowser = false;
    });
```

#### Hide File Upload button

To hide file upload in file browser popup, set `EnableFileUpload` to `false`. By default, this button is visible.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableFileUpload = false;
    });
```

#### Hide Help button

To hide the help button, set `EnableHelp` to `false`. By default, this button is visible.

The Help button is located on the left side of the language selector in the header. When clicked, it opens a popup modal displaying all available keyboard shortcuts (hotkeys).

The hotkeys are organized into the following sections:

- **File Management**: Download PDF (Cmd/Ctrl + S)
- **Navigation**: Next/Previous Page, First/Last Page, Scroll Up/Down
- **View**: Zoom In/Out, Fit In, Full Screen
- **Search**: Find, Find Next/Previous, Close Search
- **Slide**: Start presentation, Start from current slide, Close slide, Black/White screen, Next/Previous slide
- **Miscellaneous**: Help (Cmd/Ctrl + / or F1), Print (Cmd/Ctrl + P)

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableHelp = false;
    });
```

#### Hide language selector

To hide language selector, set `EnableLanguageSelector` to `false`. By default, this selector is enabled.

```cs
builder.Services
   .AddGroupDocsViewerUI(config =>
    {
        config.EnableLanguageSelector = false;
    });
```

#### Set the UI language

To set the UI language set `DefaultLanguage` property. The list of supported languages is configured via `SupportedLanguages` property.

```cs
builder.Services
    .AddGroupDocsViewerUI(config =>
    {
        config.DefaultLanguage = LanguageCode.German;
        config.SupportedLanguages = new[] { 
            LanguageCode.English, 
            LanguageCode.German, 
            LanguageCode.French 
        };
    });
```

Default language can also be set via a query string parameter, e.g. `?lang=de`.

### Custom branding (white-labeling)

You can customize the viewer's appearance by replacing logo images, setting a custom page title, and overriding brand colors with a custom stylesheet.

#### Replace logo images

Use `SetLogoImage()` and `SetLogoText()` to replace the default brand icon and text with your own files:

```cs
endpoints.MapGroupDocsViewerUI(options =>
{
    options.SetLogoImage("./Logos/logo-image.svg");
    options.SetLogoText("./Logos/logo-text.svg");
});
```

#### Set custom page title

```cs
endpoints.MapGroupDocsViewerUI(options =>
{
    options.UITitle = "Acme Corp Document Viewer";
});
```

#### Override brand colors

Use `AddCustomStylesheet()` to inject a CSS file that overrides the viewer's CSS variables:

```cs
endpoints.MapGroupDocsViewerUI(options =>
{
    options.AddCustomStylesheet("./Styles/custom-branding.css");
});
```

Example custom stylesheet with a teal color scheme:

```css
:root {
    --c-bg-brand: #0d9488;
    --c-bg-brand-hover: #0f766e;
    --c-bg-brand-secondary: #ccfbf1;
    --c-text-brand: #0d9488;
    --c-text-brand-on-default: #ffffff;
}
```

See the [custom branding sample app](./samples/GroupDocs.Viewer.UI.Sample.CustomBranding/) for a complete example.

## API Overview

The API serves document data such as metadata, pages in HTML/PNG/JPG formats, and PDFs for printing. It can be hosted in the same application or separately.

### Available API Implementations

- [GroupDocs.Viewer.UI.SelfHost.Api](https://www.nuget.org/packages/GroupDocs.Viewer.UI.SelfHost.Api)
- [GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform](https://www.nuget.org/packages/GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform)
- [GroupDocs.Viewer.UI.Cloud.Api](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Cloud.Api)

### Self-Hosted

The API is used to retrieve document information and convert documents to HTML, PNG, JPG, and PDF.

There are two versions of the self-hosted API:

- **[GroupDocs.Viewer.UI.SelfHost.Api](https://www.nuget.org/packages/GroupDocs.Viewer.UI.SelfHost.Api)**:  
  This package is based on the [GroupDocs.Viewer](https://www.nuget.org/packages/groupdocs.viewer) NuGet package and can be used in .NET 6 applications on Windows and Linux.  
  It relies heavily on `System.Drawing.Common`.

- **[GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform](https://www.nuget.org/packages/GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform)**:  
  This package is based on the [GroupDocs.Viewer.CrossPlatform](https://www.nuget.org/packages/groupdocs.viewer.crossplatform) NuGet package and works with .NET 6 and higher versions on both Linux and Windows.

After installing the package that suits your requirements, you can add it in your startup code:

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi();
```

A sample application demonstrating how to use the self-hosted API can be found [here](./samples/GroupDocs.Viewer.UI.Sample/).

### GroupDocs Cloud

In case you want to offload rendering to [GroupDocs Cloud](https://www.groupdocs.cloud/) infrastructure you can opt to use [GroupDocs.Viewer Cloud API](https://products.groupdocs.cloud/viewer/family/). To get started create your first application at <https://dashboard.groupdocs.cloud/applications> and copy your `Client Id` and `Client Secret` keys.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerCloudApi(config => 
        config
            .SetClientId("XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")
            .SetClientSecret("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX")
    )
```

The sample application that shows how to use Cloud Api can be found [here](./samples/GroupDocs.Viewer.UI.Cloud.Api.Sample/).

## Storage providers

Storage providers are used to read/write file from/to the storage. The storage provider is mandatory.

- [GroupDocs.Viewer.UI.Api.Local.Storage](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.Local.Storage)
- [GroupDocs.Viewer.UI.Api.Cloud.Storage](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.Cloud.Storage)
- [GroupDocs.Viewer.UI.Api.AzureBlob.Storage](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.AzureBlob.Storage)
- [GroupDocs.Viewer.UI.Api.AwsS3.Storage](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.AwsS3.Storage)

### Local storage

To render files from your local drive use local file storage.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddLocalStorage("./Files");
```

### Cloud storage

When rendering files using [GroupDocs Cloud](https://dashboard.groupdocs.cloud/) infrastructure you can use our cloud storage provider. GroupDocs Cloud storage supports number of 3d-party storages including Amazon S3, Google Drive and Cloud, Azure, Dropbox, Box, and FTP. To start using GroupDocs Cloud get your `Client ID` and `Client Secret` at <https://dashboard.groupdocs.cloud/applications>.

```cs
var clientId = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
var clientSecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var storageName = "Storage Name"

services
    .AddControllers()
    .AddGroupDocsViewerCloudApi(config => 
        config
            .SetClientId(clientId)
            .SetClientSecret(clientSecret)
            .SetStorageName(storageName)
    )
    .AddCloudStorage(config => 
        config
            .SetClientId(clientId)
            .SetClientSecret(clientSecret)
            .SetStorageName(storageName)
    )
```

### Azure Blob Storage

You can also use [Azure Blob Storage](https://azure.microsoft.com/en-us/products/storage/blobs/) as a storage provider for Viewer.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddAzureBlobStorage(options =>
    {
        options.AccountName = "<account name here>";
        options.AccountKey = "<account key here>";
        options.ContainerName = "<conainer name here>";
    });
```

### Amazon S3 Storage

Viewer also supports the [Amazon S3 Storage](https://aws.amazon.com/s3/) storage provider.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddAwsS3Storage(options =>
    {
        options.Region = "<region>";
        options.BucketName = "<bucket name>";
        options.AccessKey = "<access key>";
        options.SecretKey = "<secret key>";
    });
```

### Custom storage provider

You can add your storage provider by implementing the [GroupDocs.Viewer.UI.Core.IFileStorage](./src/GroupDocs.Viewer.UI.Core/IFileStorage.cs) interface.

To add you storage provider you have to register it:

```cs
//NOTE: register after AddGroupDocsViewerSelfHostApi() 
builder.Services.AddTransient<IFileStorage, MyFileStorage>();
```

## Cache providers

To cache the output files created by GroupDocs.Viewer you can use one of the cache providers:

- [GroupDocs.Viewer.UI.Api.Local.Cache](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.Local.Cache)
- [GroupDocs.Viewer.UI.Api.InMemory.Cache](https://www.nuget.org/packages/GroupDocs.Viewer.UI.Api.InMemory.Cache)

### Local cache

Stores cache on the local drive. You have to specify the path to the folder where cache files will be stored.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddLocalStorage("./Files")
    .AddLocalCache("./Cache");
```

### In-memory cache

Stores cache in memory using [Microsoft.Extensions.Caching.Memory](https://www.nuget.org/packages/microsoft.extensions.caching.memory/) package.

```cs
services
    .AddControllers()
    .AddGroupDocsViewerSelfHostApi()
    .AddLocalStorage("./Files")
    .AddInMemoryCache();
```

### Custom cache provider

You can add your cache provider by implementing the [GroupDocs.Viewer.UI.Core.IFileCache](./src/GroupDocs.Viewer.UI.Core/IFileCache.cs) interface.
To add you cache provider you have to register it:

```cs
//NOTE: register after AddGroupDocsViewerSelfHostApi()
builder.Services.AddSingleton<IFileCache, MyFileCache>();
```

Find example implementation of custom cache provider [here](./samples/GroupDocs.Viewer.UI.Sample.CustomCacheProvider).

## Linux dependencies

To run the self-hosted API on Linux, the following dependencies are required:

1. **Microsoft Fonts**: You can copy these from your Windows host.  
   If you're using Ubuntu, refer to the [How to Install Windows Fonts on Ubuntu](https://docs.groupdocs.com/viewer/java/how-to-install-windows-fonts-on-ubuntu/) documentation.

2. **`libgdiplus` Package**: This package is required for using `GroupDocs.Viewer.UI.SelfHost.Api` on Linux. Ensure you install the latest available version of `libgdiplus`.

## Running in Docker

### Pre-built Docker image

The quickest way to get started — no .NET SDK or code required:

```bash
docker run -p 8080:8080 -v ./documents:/app/Files groupdocs/viewer-net-ui:latest
```

Open `http://localhost:8080` in your browser. Place documents into the `./documents` folder.

#### Environment variables

| Variable | Default | Description |
|---|---|---|
| `VIEWER_TYPE` | `HtmlWithEmbeddedResources` | Rendering type: `HtmlWithEmbeddedResources`, `HtmlWithExternalResources`, `Png`, `Jpg` |
| `GROUPDOCS_LIC_PATH` | | Path to GroupDocs.Viewer license file |
| `VIEWER_STORAGE_PATH` | `/app/Files` | Document storage directory |
| `VIEWER_CACHE_PATH` | `/app/Cache` | Rendering cache directory |
| `VIEWER_UI_PATH` | `/` | UI endpoint path |
| `VIEWER_API_PATH` | `/viewer-api` | API endpoint path |
| `VIEWER_PRELOAD_PAGES` | `3` | Number of pages to render on first request |

#### Docker Compose

```yaml
services:
  viewer:
    image: groupdocs/viewer-net-ui:latest
    ports:
      - "8080:8080"
    volumes:
      - ./documents:/app/Files
      - ./cache:/app/Cache
      # - ./license:/app/License
    environment:
      - VIEWER_TYPE=HtmlWithEmbeddedResources
      # - GROUPDOCS_LIC_PATH=/app/License/GroupDocs.Viewer.lic
```

#### Building locally

```bash
# PowerShell
.\build-docker.ps1 -Tag "26.4.0"

# Or directly
docker build -f docker/Dockerfile -t groupdocs/viewer-net-ui .
```

### Custom Dockerfiles

To build your own Docker image with custom configuration, refer to these example Dockerfiles:

- For `GroupDocs.Viewer.UI.SelfHost.Api` and .NET 8 app, see this [Dockerfile](/samples/GroupDocs.Viewer.UI.Sample/Dockerfile).
- For `GroupDocs.Viewer.UI.SelfHost.Api.CrossPlatform` and .NET 8 app, see this [Dockerfile](/samples/GroupDocs.Viewer.UI.Sample.CrossPlatform/Dockerfile).

## Extensibility Points

The library exposes several interfaces that you can implement to customize behavior. Register your implementations in DI to override the defaults.

### IPageFormatter

Post-process rendered pages before they are returned to the client. Use this to inject custom CSS, JavaScript, watermarks, or modify HTML content.

```csharp
public class WatermarkPageFormatter : IPageFormatter
{
    public Task<Page> FormatAsync(FileCredentials fileCredentials, Page page)
    {
        var html = Encoding.UTF8.GetString(page.PageData);
        html = html.Replace("</body>", "<div class='watermark'>CONFIDENTIAL</div></body>");
        return Task.FromResult(page.SetData(Encoding.UTF8.GetBytes(html)));
    }
}

// Register in DI:
services.AddSingleton<IPageFormatter, WatermarkPageFormatter>();
```

### IFileTypeResolver

Override file type detection for files without extensions or to detect type by content inspection.

```csharp
public class ContentBasedFileTypeResolver : IFileTypeResolver
{
    public Task<FileType> ResolveFileTypeAsync(string filePath)
    {
        // Detect file type by inspecting content
        return Task.FromResult(FileType.DOCX);
    }
}

services.AddSingleton<IFileTypeResolver, ContentBasedFileTypeResolver>();
```

### ISearchTermResolver

Provide search terms that are automatically highlighted in the document when loaded (HTML rendering mode only).

```csharp
public class MySearchTermResolver : ISearchTermResolver
{
    public Task<string> ResolveSearchTermAsync(string file)
    {
        return Task.FromResult("review");
    }
}

services.AddSingleton<ISearchTermResolver, MySearchTermResolver>();
```

### IFileNameResolver

Customize how file names are resolved from file identifiers.

```csharp
public class CustomFileNameResolver : IFileNameResolver
{
    public Task<string> ResolveFileNameAsync(string file)
    {
        return Task.FromResult(Path.GetFileName(file));
    }
}

services.AddSingleton<IFileNameResolver, CustomFileNameResolver>();
```

### IErrorMessageProvider

Customize user-facing error messages for different exception types.

```csharp
public class CustomErrorMessageProvider : IErrorMessageProvider
{
    public string GetErrorMessage(Exception exception, ErrorContext context)
    {
        return "An error occurred while processing your document.";
    }
}

services.AddSingleton<IErrorMessageProvider, CustomErrorMessageProvider>();
```

## Contributing

Your contributions are welcome when you want to make the project better by adding new feature, improvement or a bug-fix.

1. Read and follow the [Don't push your pull requests](https://www.igvita.com/2011/12/19/dont-push-your-pull-requests/)
2. Follow the code guidelines and conventions.
3. Make sure to describe your pull requests well and add documentation.

## Technical support

GroupDocs provides unlimited free technical support for all of its products. Support is available to all users, including those evaluating the product. You can access support at the [Free Support Forum](https://forum.groupdocs.com/) and the [Paid Support Helpdesk](https://helpdesk.groupdocs.com/).

GroupDocs.Viewer-for-.NET-UI

GroupDocs.Viewer-for-.NET-UI Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

GroupDocs.Viewer-for-.NET-UI

GroupDocs.Viewer-for-.NET-UI Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README