# JavaScript API

> Use the TXDocumentViewer JavaScript API in ASP.NET Core, Angular and React: documentViewerLoaded, promises of loadDocument and saveDocument and several viewers.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Document Viewer > JavaScript API
- **2772 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/llms-full.txt

---

All code for the features of the Document Viewer uses the `TXDocumentViewer` object, so its basics come first: what the object is, when your code can use it in each frontend, which methods return promises, how the object model is organized and how it differs from the API of the Document Editor.

### What the JavaScript API Is

[TXDocumentViewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) is a JavaScript object that controls the Document Viewer in the browser: it loads and saves documents, searches, prints and gives access to annotations, form fields, tracked changes, signatures and the toolbar. The ASP.NET Core HTML helper and a plain JavaScript page create the viewer as a web component, and the Angular and React components load the same viewer script and initialize the viewer in an element of their own, so the same API works in every frontend.

### When the Object Is Available

`TXDocumentViewer` exists only after the viewer has been initialized. The viewer then raises the `documentViewerLoaded` event on the `window` object, and your code uses the object in a handler of this event or later:

| Frontend | Where your code starts |
|---|---|
| ASP.NET Core | A `script` element in the view with `window.addEventListener("documentViewerLoaded", ...)`, as in the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/aspnet-core/#use-the-javascript-api) tutorial |
| JavaScript | The same handler in a script of the HTML page, as in the [JavaScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/javascript/#load-a-document-with-javascript) tutorial |
| Angular | A method with `@HostListener('window:documentViewerLoaded', ['$event'])` and `declare const TXDocumentViewer: any;`, as in the [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/#load-a-document-with-typescript) tutorial |
| React | A `documentViewerLoaded` handler added in `useEffect`, which reads the object from the event, as in the [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/#load-documents-with-javascript) tutorial |

No TypeScript type definitions are documented for the object; TypeScript code in Angular and React declares it as `any`.

### Promises and Return Values

The methods that load and save documents work asynchronously and return promises. Most other members return their result directly:

| Member | Returns |
|---|---|
| [loadDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/loaddocument-method/llms-full.txt) | A promise that resolves to a Boolean value when the document has been loaded |
| [saveDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/savedocument-method/llms-full.txt) | A promise that resolves to a [DocumentSaveResult](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentsaveresult/llms-full.txt), whose `base64` and `arrayBuffer` methods return promises as well |
| [annotations.export](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/annotations/export-method/llms-full.txt) | The annotations as a JSON string |
| [forms.validate](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/forms/validate-method/llms-full.txt), [forms.getValues](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/forms/getvalues-method/llms-full.txt) | A Boolean value, and an array of the form fields with their values |
| [trackedChanges.getItems](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/trackedchanges/getitems-method/llms-full.txt) | An array with the decision on each tracked change |

Methods such as `find`, `scrollToPage`, `printDocument` and the `toggle` methods return nothing. Apart from event handlers, only the signature process uses callbacks, set with `signatures.setSubmitCallback` and `signatures.setBeforeSubmitCallback`.

The following script loads a document, waits until it has been loaded and saves it as PDF when users click a button, with `async` and `await`. Replace the `script` element of *Views/Home/Index.cshtml* of the ASP.NET Core tutorial:

```html
<input type="button" onclick="saveAsPdf()" value="Save as PDF" />

<script>
    window.addEventListener("documentViewerLoaded", async function () {
        // TXDocumentViewer exists from here on
        var loaded = await TXDocumentViewer.loadDocument(
            btoa("<strong>Loaded with JavaScript</strong>"), "loaded.html");
        console.log("Document loaded: " + loaded);

        // Most other members return their result directly
        console.log("Annotations: " + TXDocumentViewer.annotations.export());
    });

    async function saveAsPdf() {
        try {
            var result = await TXDocumentViewer.saveDocument(TXDocumentViewer.StreamType.AdobePDF,
                { mergeFormFields: true, embedAnnotations: false });
            var base64 = await result.base64();
            console.log("PDF created: " + base64.length + " base64 characters");
        } catch (error) {
            console.error("The document couldn't be saved:", error);
        }
    }
</script>
```

- `await` waits for the promise of `loadDocument`, so the next line runs after the document has been loaded.
- `annotations.export` returns its JSON string directly.
- `saveDocument` and `base64` are awaited one after the other. The `try` block catches errors of both calls; the reference doesn't document other ways to handle errors.

### The Object Model

`TXDocumentViewer` has these properties, each returning an object with its own methods:

| Property | Returns | Described in |
|---|---|---|
| [annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/annotations-property/llms-full.txt) | [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/annotations/llms-full.txt) | [Annotations](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/annotations/llms-full.txt) |
| [forms](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/forms-property/llms-full.txt) | [Forms](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/forms/llms-full.txt) | [Form Fields](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/form-fields/llms-full.txt) |
| [trackedChanges](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/trackedchanges-property/llms-full.txt) | [TrackedChanges](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/trackedchanges/llms-full.txt) | [Tracked Changes](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/tracked-changes/llms-full.txt) |
| [toolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/toolbar-property/llms-full.txt) | [Toolbar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/toolbar/llms-full.txt) | [User Interface](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/llms-full.txt) |

`TXDocumentViewer.signatures` returns the [Signatures](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/signatures/llms-full.txt) object, described in [Digital Signatures](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/digital-signatures/llms-full.txt).

The methods of `TXDocumentViewer` itself:

| Methods | Described in |
|---|---|
| `loadDocument` | [Loading Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/loading/llms-full.txt) |
| `saveDocument`, `downloadDocument` | [Saving Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/saving/llms-full.txt) |
| `scrollToPage`, `toggleSidebar` | [Navigation](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt) |
| `find`, `nextSearchResult`, `cancelSearch` | [Search](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/search/llms-full.txt) |
| `lockZoom` | [Zooming](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/zooming/llms-full.txt) |
| `printDocument` | [Printing](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/printing/llms-full.txt) |
| `toggleToolbar`, `toggleSelection`, `toggleFullScreen` | [User Interface](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/llms-full.txt) |
| `addEventListener` | [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/events/llms-full.txt) |

The formats of `saveDocument` are values of [TXDocumentViewer.StreamType](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/streamtype/enumeration/llms-full.txt): `InternalUnicodeFormat`, `MSWord`, `AdobePDF` and `WordprocessingML`. Settings objects such as [SignatureSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/signaturesettings/llms-full.txt) and [DocumentLoadSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentloadsettings/llms-full.txt) are plain JavaScript objects with the properties the reference lists.

### Several Viewers on One Page

With the web component, a page can contain several viewers. `TXDocumentViewer` refers to the viewer that was initialized last. Each `tx-document-viewer` element also provides the methods of the viewer, so your code addresses a specific viewer through its element:

```javascript
document.getElementById("viewer1").loadDocument(btoa("<strong>Viewer 1</strong>"), "viewer1.html");
document.getElementById("viewer2").loadDocument(btoa("<strong>Viewer 2</strong>"), "viewer2.html");
```

Each viewer raises its own `documentViewerLoaded` event.

### The APIs of the Viewer and the Document Editor

The Document Viewer and the Document Editor have separate JavaScript APIs:

|  | Document Viewer | Document Editor |
|---|---|---|
| Object | `TXDocumentViewer` | `TXTextControl` |
| Ready event | `documentViewerLoaded` on `window` | `textControlLoaded` of `TXTextControl` |
| Asynchronous results | Promises for loading and saving | Callback functions |
| Reference | [JavaScript API - Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/llms-full.txt) | [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/llms-full.txt) |

Both can be used on the same page. [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt) of the Document Editor describes the editor's API.

### Find Members in the Reference

The [JavaScript API - Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/llms-full.txt) reference lists every object with its properties and methods. For each method, it gives the parameters in their order, the return type and, for most members, the version in which the member was introduced. Some features of the viewer are released with versions of the Document Viewer package between the versions of TX Text Control, such as the `zoomChanged` event in version 33.2.1, and aren't yet listed in the reference.

### Next Steps

- [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/events/llms-full.txt): all events of the viewer.
- [Loading Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/loading/llms-full.txt): load documents with `loadDocument`.
- [Architecture](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/architecture/llms-full.txt): what happens between the browser and the server.

---

## Nearby

- **Previous:** [Signature Fields](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/signature-fields/llms-full.txt)
- **Next:** [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/events/llms-full.txt)