2

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'

}
Panchakshari Puranmatt
  • 183
  • 6
  • 10

2 Answers2

3

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.

Berkin Sansal
  • 454
  • 1
  • 5
  • 11
  • My scenario is that I am developing a document management system using angular and on clicking a file in my app, I need to open that respective file in the **ejs-documenteditorcontainer**. So this is not posssible? – Panchakshari Puranmatt Oct 14 '20 at 06:50
  • 1
    The way you want seems not possible. If you want, you can try two methods, but I am not sure if those are working for you. First method, you can try below link by changing sfdt file extension restriction to doc/docx. Second method, you can lead your user to use toolbar to open doc/docx file. https://ej2.syncfusion.com/angular/documentation/document-editor/import/#import-document-from-local-machine – Berkin Sansal Oct 14 '20 at 08:53
  • your new solution works perfectly for opening a file manually. That is, the user needs to click on the import button in order to open or select a file. But I wanted to open the file on load. That is, I want to display a specific doc/dox file in the editor initially and there should be no use of the open/import button. – Panchakshari Puranmatt Oct 15 '20 at 07:39
  • I see. Where is your specific doc/docx file? Is it local file or in the asset or somewhere else? – Berkin Sansal Oct 15 '20 at 08:12
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/

Harini Chellappa
  • 51
  • 2