The latest release version of the TX Text Control DocumentViewer for ASP.NET, ASP.NET Core and Angular comes with document collaboration features such as annotations and comments. It allows you to add and share annotations from different users to any type of document supported by TX Text Control including PDF, DOC, DOCX, RTF and the internal TX Text Control format (TX).

This allows an easy integration of document collaboration workflow features into your TX Text Control based applications.

The DocumentViewer can be initialized with a user name that defines the current user using the UserNames property:

<div class="tx-container">
@Html.TXTextControl().DocumentViewer(settings => {
settings.DocumentPath = Server.MapPath("~/App_Data/Documents/invoice_results.docx");
settings.Dock = DocumentViewerSettings.DockStyle.Fill;
settings.IsSelectionActivated = true;
settings.ShowThumbnailPane = false;
settings.UserNames = new string[] { "Tim Typer" };
}).Render()
</div>
view raw tets.cshtml hosted with ❤ by GitHub

When the demo is initialized, the annotation toolbar is opened automatically to show the annotations in the sidebar:

DocumentViewer annotations

The annotations are not stored within the document which allows you to share annotations with all document types that are supported including DOCX, DOC, RTF and PDF. On loading the viewer, the annotation JSON is loaded using the JavaScript method annotation.load:

window.addEventListener("documentViewerLoaded", function () {
var annotationJSON =
"[[{ \"pen\":{\"width\":18,\"color\":\"rgba(255, 255, 0, .5)\",\"cap\":\"butt\" [...]";
TXDocumentViewer.annotations.load(annotationJSON);
});
view raw test.js hosted with ❤ by GitHub

You can add additional annotations and comments to the document:

DocumentViewer annotations

The two green buttons at the bottom of the demo show how to save and load the annotations:

DocumentViewer annotations

On clicking Export Annotations JSON, the complete annotations are serialized as JSON and copied into a text area. Using the button Load Annotations JSON, you can load the exported annotations back into the viewer.

function exportAnnotations() {
$("#taAnnotations").val(TXDocumentViewer.annotations.export());
}
function loadAnnotations() {
var annotationData = $("#taAnnotations").val();
try {
TXDocumentViewer.annotations.load(annotationData);
} catch (error) {
$('.alert').show().delay(3000).fadeOut(300);
}
}
view raw test.js hosted with ❤ by GitHub

You can try this on your own by launching the live demo:

Live Demo