We have just released a new package versions of the TX Text Control DocumentViewer for ASP.NET, ASP.NET Core, Angular, and React.

Updating the Packages

To update the NuGet package, open the NuGet Package Manager, select nuget.org as the package source, select Updates and locate the TXTextControl.Web.DocumentViewer package. From the Versions drop-down list, select the latest stable version (32.3.1).

NuGet

To update the Angular npm package use the following command:

npm install @txtextcontrol/tx-ng-document-viewer@latest

To update the React npm package use the following command:

npm install @txtextcontrol/tx-react-document-viewer@latest

Fixed Issues

Version 32.3.1 includes both new features and fixes for known issues. The below tables lists all fixed known issues.

ID Description Status
MVCDV-200 Angular: Documents cannot be loaded via JS API Fixed in 32.3.1
MVCDV-204 Document Viewer re-renders only partially when using partial views Fixed in 32.3.1
MVCDV-202 After signing all fields, the NEXT and SUBMIT buttons are visible for a short period of time Fixed in 32.3.1
MVCDV-201 Signature box is displayed for PDF documents with signature fields when using pdf.js as rendering engine. Fixed in 32.3.1
MVCDV-199 TXDocumentViewer.downloadDocument throws an error Fixed in 32.3.1
MVCDV-198 When annotations are loaded using JavaScript, they are not immediately visible Fixed in 32.3.1

Injecting CSS

A new feature is the ability to inject custom CSS into the DocumentViewer. This can be done by adding CSS rules to the shadow DOM of the DocumentViewer. The following code snippet shows how to inject a custom CSS rule into the DocumentViewer:

window.addEventListener("documentViewerLoaded", function (eventArgs) {
const sheet = new CSSStyleSheet();
sheet.insertRule(".page-image { background-image: url('/Images/loader2.svg') !important; background-repeat : no-repeat !important; background-size: contain !important; }");
sheet.insertRule("#tx-thumbnails img { background-image: url('/Images/loader2.svg') !important; background-repeat : no-repeat !important; background-size: contain !important; }");
eventArgs.detail.targetElement.shadowRoot.adoptedStyleSheets = [sheet];
});
view raw test.js hosted with ❤ by GitHub

This code snippet injects a custom CSS rule that changes the loading images for the page and the thumbnails that are displayed while the document loads.

Custom loading images

Or you can use this new way to customize the style of viewer elements. The following code changes the background color of the toolbar:

window.addEventListener("documentViewerLoaded", function (eventArgs) {
const sheet = new CSSStyleSheet();
sheet.insertRule("#tx-toolbar { background: linear-gradient(-90deg, #ea1183, #822162); !important; }");
eventArgs.detail.targetElement.shadowRoot.adoptedStyleSheets = [sheet];
});
view raw test.js hosted with ❤ by GitHub

Style customization

Make sure to update the packages to the latest version to benefit from the new features and fixes.

Happy coding!