Documents are typically loaded from a database, from an external blob storage, or from the file system on the server. The Document Editor provides a JavaScript method to load a document in one of the supported formats from a variable that is encoded in Base64.

Client-Side Loading

The loadDocument method expects a string that is Base64 encoded and will load this document directly on the client side. You will need to load the document from the assets directory beforehand.

HttpClientModule

In this example, the sample document to load is stored in the assets/docs/ folder and is named test.tx. We will use the HttpClientModule to load the document using a get method. The HttpClientModule must be included in the app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DocumentEditorModule } from '@txtextcontrol/tx-ng-document-editor';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DocumentEditorModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the app.component.ts, an HTTP GET method is added to the ngOnInit method. The response is then passed to the JavaScript method loadDocument.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare const loadDocument: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'my-editor-app';
  webSocketUrl = 'wss://backend.textcontrol.com?access-token=123';

  private URL = '../assets/docs/test.tx';

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.httpClient.get(this.URL, {responseType:'blob'}).subscribe((response) => {
      loadDocument(response);
    });
  }

}

JavaScript Loading

The JavaScript method loadDocument converts the file blob to a base64-encoded string and loads it into the Document Editor using the loadDocument method.

function loadDocument(document) {
  TXTextControl.addEventListener("textControlLoaded", () => {
    blobToBase64(document, (encoded) => {
      TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat, encoded);
    });
  });
}

function blobToBase64(blob, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    callback(reader.result.split(',')[1]);
  };
  reader.readAsDataURL(blob);
}