Is there a way to open the word (doc or docx) file by default on load using ejs-documenteditorcontainer in angular 8+?

Question

Here I have tried using [(ngModel)] to render a word file but it's not working as required. Is there any other way around?

I have used Angular 10

Thanks in advance

HTML:

<div class="row">
  <div class="col-12">
    <ejs-documenteditorcontainer
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      style="display:block;height:660px" [enableToolbar]=true [(ngModel)]="editor"> </ejs-documenteditorcontainer>
  </div>
</div>

TS:

import { Component, ViewEncapsulation } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ToolbarService]
})
export class AppComponent {

  editor: any = 'www.someWordFileFromOneDriveOrFromGoogleDrive.com'

}

Answer 1

Document editor is not a form element. Hence it won’t support ngModel directive for binding data. It accepts only SFDT Json string. Hence you need to convert the word document to SFDT to open it in editor via open API of document editor.

https://ej2.syncfusion.com/documentation/api/document-editor#open

To open the file on load, you can use created event of document editor.

https://ej2.syncfusion.com/documentation/api/document-editor#created

Sample link to open the SFDT data in created event: https://stackblitz.com/edit/angular-7tvebw-3abz1v?file=app.component.html

For converting word documents to SFDT to load it in editor, you need server-side interaction.

Please refer the below documentation for converting word documents to SFDT in server-side.

https://ej2.syncfusion.com/angular/documentation/document-editor/import/#convert-word-documents-into-sfdt

you can also check the below documentations platform-wise on web services needed for document editor.

https://ej2.syncfusion.com/angular/documentation/document-editor/web-services/core/

https://ej2.syncfusion.com/angular/documentation/document-editor/web-services/mvc/

https://ej2.syncfusion.com/angular/documentation/document-editor/web-services/java/

Answer 2

Finally I found a trick. I don't know why Syncfusion didn't mention this api in their documentation. But it works!! Stackblitz demo is here. You can load your word file to ejs-documenteditorcontainer by following this idea.

Add to HTML:

    <input id="open_word" #open_word style="position:fixed; left:-100em" type="file" (change)="onFileChange($event)" accept=".dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt"/>
    <button ejs-button (click)="onFileOpenClick()">Import</button>

Add to TS:

    public onFileOpenClick() :void {
        document.getElementById('open_word').click();
    }
    
    public onFileChange(e: any) :void {
         if (e.target.files[0]) {
            let file = e.target.files[0];
            if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
                this.loadFile(file);
            }
        }
    }
    
    public loadFile(file: File): void {
        const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
        let ajax: XMLHttpRequest = new XMLHttpRequest();
        ajax.open('POST', serviceUrl + 'Import', true);
        ajax.onreadystatechange = () => {
            if (ajax.readyState === 4) {
                if (ajax.status === 200 || ajax.status === 304) {
                    // open SFDT text in document editor
                    this.documentEditor.open(ajax.responseText);
                }
            }
        }
        let formData: FormData = new FormData();
        formData.append('files', file);
        ajax.send(formData);
    }

Old Answer: Actually it is not easy to load. Either you need to convert your doc/docx file to SFDT format and open it with document editor or you can make this file conversion using the .NET Standard library Syncfusion.EJ2.WordEditor.AspNet.Core by the web API service implementation.

You can check this documentation from Syncfusion for details.