Document Editor

When using the Angular version of the TX Text Control document editor, documents are loaded client side using the JavaScript API. If you want to load documents from a server or repository, the document needs to be loaded from client-side (for example from a service endpoint) in order to be loaded into the editor.

Open Local Documents

To show how this works, this sample loads local documents that can be opened using a file open dialog.

Create a basic Angular application as described in this tutorial: Creating your First Angular Application

Create a folder named js in the folder src/assets/ and create a new JavaScript file named custom.js .

function saveDocument() { TXTextControl.saveDocument(TXTextControl.StreamType.AdobePDF, function (e) { bDocument = e.data; var element = document.createElement('a'); element.setAttribute('href', 'data:application/octet-stream;base64,' + e.data); element.setAttribute('download', "document.pdf"); element.style.display = 'none'; document.body.appendChild(element); // simulate click element.click(); // remove the link document.body.removeChild(element); }); }

function readDocument(input) {

input = input.srcElement;

if (input.files && input.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (e) { var streamType = TXTextControl.streamType.PlainText; // set the StreamType based on the lower case extension switch (fileinput.value.split('.').pop().toLowerCase()) { case 'doc': streamType = TXTextControl.streamType.MSWord; break; case 'docx': streamType = TXTextControl.streamType.WordprocessingML; break; case 'rtf': streamType = TXTextControl.streamType.RichTextFormat; break; case 'htm': streamType = TXTextControl.streamType.HTMLFormat; break; case 'tx': streamType = TXTextControl.streamType.InternalUnicodeFormat; break; case 'pdf': streamType = TXTextControl.streamType.AdobePDF; break; } // load the document beginning at the Base64 data (split at comma) TXTextControl.loadDocument(streamType, e.target.result.split(',')[1]); }; // read the file and convert it to Base64 fileReader.readAsDataURL(input.files[0]); } } And add this JavaScript file to the scripts array of the projects architect/build/options element in the angular.json file:

"scripts": [ "src/assets/js/custom.js" ] Add the declaration and the methods onChangeLoad and onClickSave to the app.component.ts TypeScript file, so that the complete file looks like this:

import { Component } from '@angular/core'; declare const readDocument: any; declare const saveDocument: any;

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-editor-app';

onChangeLoad(event: any) { readDocument(event); }

onClickSave() { saveDocument(); }

} Add a button and an input element to the app.component.html with the Angular click and change handlers:

When starting this Angular application, a file open dialog is opened to choose a local document that is then loaded into the document editor. When clicking the Save as PDF button, the document is saved and downloaded as an Adobe PDF document.

Try this on your own and create your first Angular application without installing any setup. Simply by downloading the npm packages.

Creating your First Angular Application

Loading Documents on Initialization

If you want to load a document on initializing TX Text Control, please have a look at this article:

Angular: Loading Documents on Initializing TX Text Control

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Document Editor

Post tagged with Document Editor in 2019

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Document Editor

Post tagged with Document Editor in 2019 ​

December 2019

Post tagged with Document Editor in 2019