Announcing the release of TX Text Control Document Viewer 33.0.1 for Blazor. This update includes one of the most requested features: electronic signature support.

Now, developers can integrate e-signing workflows directly into their Blazor applications. This allows users to digitally sign documents without leaving the browser and eliminates the need for third-party tools. Electronic signatures, also known as e-signatures or digital approvals, provide a legally binding way to sign documents online, eliminating the need for printing or scanning. Digital signatures use encryption technology to securely verify a signer's identity, ensuring document authenticity and tamper-proof approval processes.

You can download the new version directly from NuGet, or you can update to the latest version using the NuGet Package Manager.

• TXTextControl.Web.Blazor.DocumentViewer

Learn More

This article shows how to integrate the Document Viewer for Blazor into an ASP.NET Core application running on Windows and Linux. The Document Viewer is a powerful and flexible component to display documents in your Blazor application.

Getting Started: Document Viewer for Blazor in ASP.NET Core

Built-In E-Signature Support

Version 33.0.1 provides a seamless and user-friendly electronic signature experience within the Blazor Document Viewer. Users can interact with signature fields, draw or type signatures, and complete signing tasks directly within the document interface.

This update enables secure, legally binding workflows for contracts, NDAs, and other business documents, eliminating the need for printing, signing, and scanning.

You can now set a SignatureSettings object to define the settings for the signature process before loading a document.

<div id="viewerContainer" style="width: 800px; height: 500px;">
    <DocumentViewer @ref="_documentViewer" OnLoad="HandleViewerLoad" SignatureSettings="_signatureSettings" />
</div>

In Razor code, signature settings are used to define signature boxes and the unique ID, as well as the Web API endpoint that handles the actual digital signing process.

private DocumentViewer? _documentViewer;
private SignatureSettings? _signatureSettings;

_signatureSettings = new SignatureSettings
    {
        SignatureBoxes = new[] { new SignatureBox("txsign") },
        ShowSignatureBar = true,
        UniqueId = Guid.NewGuid().ToString("N"),
        RedirectUrlAfterSignature = $"{Navigation.BaseUri}signature/signdocument"
    };

byte[] documentBytes = await File.ReadAllBytesAsync(DocumentPath);
await _documentViewer.LoadDocument(documentBytes);

Learn More

The SignatureSettings must be defined when an instance of the document viewer is initialized. This object establishes the instructions for the signing process and how the signature fields are handled.

Document Viewer: SignatureSettings Explained

Sample Application

This tutorial's sample also implements a Web API method that automatically calls a function when the document is submitted. This function digitally signs the signature field with a certificate and exports the document as a PDF.

using Microsoft.AspNetCore.Mvc;
using System.Security.Cryptography.X509Certificates;
using TXTextControl;
using TXTextControl.Web.MVC.DocumentViewer.Models;

[ApiController]
[Route("signature")]
public class SignatureController : Controller
{
    private const string CertificatePath = "Certificates/my_certificate.pfx";
    private const string CertificatePassword = "123123123"; // ⚠️ Consider securing this outside of source code

    [HttpPost("SignDocument")]
    public IActionResult SignDocument([FromBody] SignatureData signatureData)
    {
        if (signatureData?.SignedDocument?.Document == null || string.IsNullOrWhiteSpace(signatureData.UniqueId))
        {
            return BadRequest("Invalid signature data.");
        }

        try
        {
            byte[] signedDocumentBytes = Convert.FromBase64String(signatureData.SignedDocument.Document);
            string outputFilePath = Path.Combine("Signed Documents", $"results_{signatureData.UniqueId}.pdf");

            using (var tx = new ServerTextControl())
            {
                tx.Create();

                // Load the document from Base64
                tx.Load(signedDocumentBytes, BinaryStreamType.InternalUnicodeFormat);

                // Load digital certificate
                var certificate = new X509Certificate2(CertificatePath, CertificatePassword, X509KeyStorageFlags.Exportable);

                // Assign the certificate to signature field
                var saveSettings = new SaveSettings
                {
                    CreatorApplication = "TX Text Control Blazor Sample Application",
                    SignatureFields = new[]
                    {
                        new DigitalSignature(certificate, null, "txsign")
                    }
                };

                // Save as signed PDF
                tx.Save(outputFilePath, StreamType.AdobePDF, saveSettings);
            }

            return Ok(new { message = "Document signed successfully.", filePath = $"Signed Documents/results_{signatureData.UniqueId}.pdf" });
        }
        catch (Exception ex)
        {
            // Log the error 
            Console.WriteLine($"Error during signing: {ex.Message}");
            return StatusCode(500, "An error occurred while signing the document.");
        }
    }
}

The complete Razor page code is shown below. It demonstrates how to configure SignatureSettings, load a server-side document, and use the new OnLoad event to attach a client-side event.

@page "/"
@using TXTextControl.Web.Blazor.DocumentViewer
@inject NavigationManager Navigation
@inject IJSRuntime JS
@rendermode InteractiveServer

<PageTitle>Document Viewer</PageTitle>

<div id="viewerContainer" style="width: 800px; height: 500px;">
    <DocumentViewer @ref="_documentViewer" OnLoad="HandleViewerLoad" SignatureSettings="_signatureSettings" />
</div>

<button class="btn btn-primary mt-3" @onclick="LoadDocumentAsync">Load Document</button>

@code {
    private DocumentViewer? _documentViewer;
    private SignatureSettings? _signatureSettings;

    private const string DocumentFileName = "sign.tx";
    private const string DocumentFolder = "Documents";
    private string DocumentPath => Path.Combine(DocumentFolder, DocumentFileName);

    private async Task LoadDocumentAsync()
    {
        if (_documentViewer == null)
        {
            Console.WriteLine("DocumentViewer component is not initialized.");
            return;
        }

        if (!File.Exists(DocumentPath))
        {
            Console.WriteLine($"Document not found at path: {DocumentPath}");
            return;
        }

        try
        {
            _signatureSettings = new SignatureSettings
                {
                    SignatureBoxes = new[] { new SignatureBox("txsign") },
                    ShowSignatureBar = true,
                    UniqueId = Guid.NewGuid().ToString("N"),
                    RedirectUrlAfterSignature = $"{Navigation.BaseUri}signature/signdocument"
                };

            byte[] documentBytes = await File.ReadAllBytesAsync(DocumentPath);
            await _documentViewer.LoadDocument(documentBytes);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"An error occurred while loading the document: {ex.Message}");
        }
    }

    private async Task HandleViewerLoad()
    {
        await JS.InvokeVoidAsync("setSignatureCallback");
    }
}

<script>
    function setSignatureCallback() {
        const viewerContainer = document.getElementById("viewerContainer");
        const documentViewer = viewerContainer?.querySelector("tx-document-viewer");

        if (!documentViewer || !documentViewer.signatures) {
            console.warn("Signature callback could not be attached: viewer not ready.");
            return;
        }

        documentViewer.signatures.setSubmitCallback(() => {
            alert("Signature process completed.");
        });
    }
</script>

If you're already using the Document Viewer in your Blazor applications, updating to version 33.0.1 is as easy as upgrading your NuGet package. If you're just getting started, check out our Getting Started documentation or try our live demo to experience the new signing features.

Stay tuned - more digital document workflow features are coming to TX Text Control for Blazor!