Document Viewer Examples
Displaying documents, collecting form data and electronic signatures, adding annotations: each task of the Document Viewer has an online demo that shows its code. The sample projects on GitHub combine the viewer with an ASP.NET Core backend in complete workflows, such as forms that users fill out and sign. Most of them were written for version 33.0 or earlier; the version is named with each sample, and GitHub Examples describes how to update one.
Online Demos
All demos run on the current version and show their view, controller and JavaScript on the Code tab:
| Example | What it shows | Where |
|---|---|---|
| Concept | The Document Viewer in an ASP.NET Core view | Concept |
| Loading from a file | A document loaded from a file on the server | From File |
| Loading from data | A document passed as base64-encoded data from the memory of the server | From Data |
| Loading from JavaScript | A document loaded with the JavaScript API | From JavaScript |
| Electronic signatures | A complete signing process: the user signs the signature and initials boxes, and the server receives the signed document | Electronic Signatures |
| Raw signature data | The strokes of a signature captured, inspected and replayed | Raw Signature Data |
| PDF.js | PDF documents rendered in the browser with a locally hosted PDF.js | PDF.js Renderer |
| Uploading PDF documents | A local PDF file opened in the viewer with PDF.js | Uploading PDFs |
| Flattened PDF forms | Completed form fields of a PDF flattened into a download | Saving Form Fields |
| Form values | Form field values exported as JSON or PDF | Export Form Values |
| Saved form documents | A form saved with its values and loaded again | Saving Form Fields |
| Conditional instructions | Form fields that validate and depend on each other | Conditional Instructions |
| Annotations | Highlights, comments, ink, text and stamps, and their JSON layer loaded and saved | Annotation Types, Loading and Saving |
| Signature annotations | A signature annotation merged into the document on the server | Signature Annotations |
| Custom stamps | Stamps of your own as annotations | Custom Stamps |
| Word comments | Comments of a Word document shown as annotations | Importing Comments |
| Tracked changes | Reviewing, navigating and exporting tracked changes | Review Tracked Changes |
| Events | Events of annotations and signatures | Event Handling |
| User interface | Thumbnails, toolbar and full screen | Visual Elements |
| Search and navigation | Finding text and scrolling to a page | Find Text, Scroll to Page |
ASP.NET Core Samples
| Example | What it shows | Where |
|---|---|---|
| Custom signing | A signature request handled by a controller of your application instead of JavaScript, as described in Handling Signature Requests in ASP.NET Core. Version 33.0 | TextControl.Web.MVC.CustomSigning |
| Signature hashes | A hash of the raw signature data stored as evidence and checked later, as described in E-Sign: Validating Signature Hashes Generated from Vector Data in ASP.NET Core C#. Version 33.0 | TXTextControl.MVC.Core.Viewer.SignatureHash |
| Healthcare forms | A digital forms workflow with electronic signatures, as described in Healthcare Use Case: Digital Forms Workflow with Electronic Signatures. Version 33.0 | TX.TextControl.Web.MVC.Core.SignWorkflow |
| Financial forms | Prefilled forms that users complete and sign, as described in Transforming Financial Documents into Smart and Secure Forms in ASP.NET Core C#. Version 33.0 | TXTextControl.Web.MVC.Financial |
| Insurance claims | Claim forms created, deployed, filled out, signed and processed, as described in Use Case: Create, Deploy and Process Insurance Claim Forms. Version 33.0 | TextControl.Web.MVC.InsuranceClaim |
| Shared annotations | Annotations shared live between users with SignalR, as described in DocumentViewer Collaboration: Live Share Document Annotations. Version 33.0 | TextControl.Web.MVC.DocumentViewer.Collaboration |
The sample that shows the Document Editor and the Document Viewer in one view is listed in Document Editor Examples, and the samples that sign documents with a certificate after users signed them in the viewer are in Digital Signature Examples.
Blazor and Angular Samples
| Example | What it shows | Where |
|---|---|---|
| Blazor: signing with the viewer component | Electronic signatures with the DocumentViewer component of TXTextControl.Web.Blazor.DocumentViewer, signed with a certificate on the server, as described in E-Sign Comes to Blazor: Document Viewer 33.0.1 Released. Version 33.0 | TXTextControl.Blazor.Esign |
| Blazor Web App: signature workflow | The viewer in a Blazor Web App on .NET 8 that loads a document with SignatureSettings, receives the signed document in a controller and signs its signature field with a PFX certificate as PDF, as described in Handling Electronic Signatures in a Blazor Web App using .NET 8. Version 32.0 | TXTextControl.Server.Blazor.Viewer.Signature |
| Blazor Server with JavaScript interop | The viewer in a Blazor Server application on .NET 8 through JavaScript interop, as described in Using the Document Viewer in a Blazor Server App with .NET 8. Version 33.0 | TXTextControl.Server.Blazor.Viewer.DotNet8 |
| Angular: preparing forms | Forms prepared for the viewer and a custom signing process in Angular and ASP.NET Core, as described in Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core. Version 32.0 | TXTextControl.Core.Angular.Forms.Prepare |
Blazor and Angular in the Integration Guide describe the current setup.
React and JavaScript Articles
For React and plain JavaScript, the articles below hold their code in the article itself, without a repository to clone:
| Example | What it shows | Where |
|---|---|---|
| React | The viewer in a React application with the React package | Using the TX Text Control Document Viewer in a React Application |
| Loading documents in React | Documents loaded from base64 data and from a URL | Loading Documents into the Document Viewer in React |
| Form field values | Saving the values of form fields in the document | Document Viewer: Save the Values of Form Fields in Documents |
| Annotations across document types | Adding annotations and sharing them between document formats | Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C# |
| Rendering mode | Choosing how the viewer renders pages | Document Viewer: Setting the Rendering Mode |
React and JavaScript in the Integration Guide describe the current setup.
Next Steps
- Digital Signature Examples: sign the documents that users signed in the viewer.
- Document Editor Examples: demos and samples of the Document Editor.
- Getting Started: a first application with the Document Viewer.
- Document Viewer: the features of the viewer in detail.