Есть ли способ открыть файл word (doc или docx) по умолчанию при загрузке с помощью ejs-Documenteditorcontainer в angular 8+?

Question

Здесь я попытался использовать [(ngModel)] для рендеринга текстового файла, но он не работает должным образом. Есть ли другой выход?

Я использовал Angular 10

заранее спасибо

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

Редактор документов не является элементом формы. Следовательно, он не будет поддерживать директиву ngModel для привязки данных. Он принимает только строку SFDT Json. Следовательно, вам необходимо преобразовать текстовый документ в SFDT, чтобы открыть его в редакторе через открытый API редактора документов.

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

Чтобы открыть файл при загрузке, вы можете использовать событие created редактора документа.

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

Пример ссылки для открытия данных SFDT в созданном событии: https://stackblitz.com/edit/angular-7tvebw-3abz1v?file=app.component.html

Для преобразования текстовых документов в SFDT для загрузки в редактор вам потребуется взаимодействие на стороне сервера.

Пожалуйста, обратитесь к приведенной ниже документации для преобразования текстовых документов в SFDT на стороне сервера.

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

вы также можете проверить приведенную ниже документацию по веб-службам, которые необходимы для редактора документов.

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

Наконец я нашел уловку. Я не знаю, почему Syncfusion не упомянул этот API в своей документации. Но работает!! Демо Stackblitz здесь. Вы можете загрузить свой файл Word в ejs-documenteditorcontainer следуя этой идее.

Добавить в 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>

Добавить в 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);
    }

Старый ответ: Вообще-то загрузить непросто. Либо вам нужно преобразовать файл doc/docx в формат SFDT и открыть его в редакторе документов, либо вы можете выполнить это преобразование файла с помощью стандартной библиотеки.NET. Syncfusion.EJ2.WordEditor.AspNet.Core реализацией службы веб-API.

Вы можете проверить эту документацию в Syncfusion для получения подробной информации.