Getting Started: Document Viewer with JavaScript
This article shows how to use the TX Text Control document viewer in a pure HTML and JavaScript environment.
Prerequisites
There are two ways to evaluate the TX Text Control Document Viewer. You can either host your own backend by downloading the trial version of TX Text Control .NET Server, or by creating a trial access token to use a hosted backend, valid for 30 days:
- Download Trial Version
Setup download and installation required.- Create Trial Access Token
No download and local installation required.
Creating the Application
To load the initial JavaScript, the backend provides an endpoint that returns the required JavaScript. This endpoint can be used in a script tag in HTML to embed the required JavaScript code.
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>Backend
The above script references the hosted test backend. If you host it yourself, replace the URL with your backend.
The Document Viewer is a Web Component. Each instance uses an encapsulated shadow DOM with it's own style and markup. The element name of the Web Component is <tx‑document‑viewer> and can be simply added to any HTML page:
<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1, "basePath":"https://backend.textcontrol.com"}'>
</tx-document-viewer>The complete HTML page would look like this. The element in which the editor is created is the div element with the id txDocumentEditor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TX Text Control Document Viewer from JS</title>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>
<style>
#txDocumentViewer {
height: 800px;
width: 800px;
}
</style>
</head>
<body>
<tx-document-viewer
id="viewer1"
settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1, "basePath":"https://backend.textcontrol.com"}'>
</tx-document-viewer>
</body>
</html>Learn More
This article gives an overview of the advantages and how those Web Components are integrated.
Related Posts
Building an ASP.NET Core Backend Application to Host the Document Editor and…
This article explains how to create an ASP.NET Core backend application to host the Document Editor and Document Viewer. This backend application is required to provide the required functionality…
JavaScriptASP.NET CoreDocument Editor
Getting Started: Document Editor with JavaScript
This article shows how to use the TX Text Control document editor in a pure HTML and JavaScript environment.
ASP.NETASP.NET CoreDocument Viewer
High-Performance Text Replacement in Large DOCX Files using C# .NET
Learn how to efficiently replace text in large DOCX files using C# .NET and the ServerTextControl component from Text Control. This article demonstrates the performance benefits of using the…
ASP.NETASP.NET CoreDocument Viewer
Document Viewer 33.2.1 Released: New Event and Bug Fixes
This service pack includes important bug fixes and improvements to enhance the stability and performance of the Document Viewer. In addition, a new event has been introduced to provide developers…
Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts…
In this article, we explore how to enrich PDF documents with JavaScript using TX Text Control in C# .NET. Read on to learn how to create time-based alerts that trigger actions based on specific…