In addition to a powerful Document Editor, TX Text Control provides a Document Viewer for viewing documents in a variety of formats, including Office Open XML, DOCX, DOC, RTF, and PDF.

Viewing documents in web applications is a very typical use case. Consider an invoice portal where invoices are previewed and offered for download, or documents that should be reviewed by other users to add annotations. Electronic signatures, where documents are displayed and users can sign the document, is a very common and popular use case.

TX Text Control provides a fully-featured Document Viewer that can be used in any web application. The viewer is customizable and can be integrated into any web application without any dependencies to MS Word or Acrobat Reader.

Typical Viewer Tasks

The Document Viewer is a fully-featured viewer that can be used to display documents in various formats. The following tasks are typical for a viewer:

• View documents in a variety of formats, including DOCX, DOC, RTF, and PDF
• Print documents
• Fill out form fields
• Sign documents (electronically and digitally)
• Add annotations
• Review track changes

The above tasks are typical features of the Document Viewer and can be implemented with little code, providing a complete UI and workflow for these tasks. The viewer can be customized in many ways to fit into any web application.

Tutorial

The following tutorial shows how to create a .NET 6 ASP.NET Core web application that uses the DocumentViewer component.

Getting Started Video

Prefer a video tutorial? This complete tutorial is available as a video tutorial that also shows how to load documents.

How to use the Document Viewer in ASP.NET Core C#

Creating the Application

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the .NET 6 SDK.

1. In Visual Studio 2022, create a new project by choosing Create a new project.

2. Select ASP.NET Core Web App (Model-View-Controller) as the project template and confirm with Next.

3. Choose a name for your project and confirm with Next.

4. In the next dialog, choose .NET 8 (Long Term Support) as the Framework and confirm with Create.

   

Adding the NuGet Packages

5. In the Solution Explorer, select your created project and choose Manage NuGet Packages... from the Project main menu.

   Select Text Control Offline Packages from the Package source drop-down.

   Package Source

   Select either Text Control Offline Packages or nuget.org as the Package source. Packages in the official Text Control NuGet profile are frequently updated.

   In case you are using a Trial Access Token, please choose nuget.org.

   Install the latest versions of the following packages:

   • TXTextControl.Web.DocumentViewer
   • TXTextControl.TextControl.ASP.SDK

   

6. Switch the package source to nuget.org and choose Installed to check for available updates. Update the installed packages to the most current version.

   

Adding the Control to the View

7. Find the Index.cshtml file in the Views -> Home folder. Replace the complete content with the following code:

   @using TXTextControl.Web.MVC.DocumentViewer
   @using System.Text
           
   <div style="width: 800px; height: 600px;">
       
   @Html.TXTextControl().DocumentViewer(settings => {
       settings.DocumentData = Convert.ToBase64String(
           Encoding.ASCII.GetBytes("<strong>Sample Content</strong>"));
       settings.Dock = DocumentViewerSettings.DockStyle.Fill;
   }).Render()
       
   </div>
   
   <script>
   
       var jsonAnnotations = '[[{"pen":{"type":"comment","objectWidth":32,"objectHeight":32},"user":"Unknown User","location":{"x":127,"y":50},"time":1658908087097,"comments":[{"comment":"Welcome to Text Control","user":"Unknown User","date":1658908100339,"id":"c8d818ce-ff1e-4c0c-b78c-6ba95a98dede","status":"none"}],"id":"feed80ff-1c94-4abf-9838-3e833faa4092","status":"Accepted"}]]';
   
       window.addEventListener("documentViewerLoaded", function () {
           TXDocumentViewer.annotations.showToolbar(true);
           TXDocumentViewer.annotations.load(jsonAnnotations);
       });
   
   </script>

   This code adds the DocumentViewer to the view and loads a simple HTML string.

Conclusion

TX Text Control is a highly versatile document viewer designed for seamless integration into any web application. This powerful tool is fully customizable, allowing developers to customize how it works and looks to meet specific needs. One of its main advantages is that it works independently, i.e. it does not require any external dependencies such as MS Word or Acrobat Reader. This flexibility allows for a smoother and more efficient deployment across a wide variety of web environments.