有没有办法在 angular 8+ 中使用 ejs-documenteditorcontainer 在加载时默认打开 word（doc 或 docx）文件？

Question

我在这里尝试使用 [(ngModel)] 渲染一个 word 文件，但它没有按要求工作。还有其他办法吗？

我用过Angular10

提前致谢

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

终于找到窍门了。我不知道为什么 Syncfusion 没有在他们的文档中提到这个 api。但它有效！ Stackblitz 演示是 here。您可以按照这个想法将您的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 Standard 库 Syncfusion.EJ2.WordEditor.AspNet.Core 进行此文件转换网络 API 服务实施。

您可以查看this documentation from Syncfusion了解详情。

Answer 2

文档编辑器不是表单元素。因此它不支持用于绑定数据的 ngModel 指令。它只接受 SFDT Json 字符串。因此，您需要将 word 文档转换为 SFDT，以便通过文档编辑器的打开 API 在编辑器中打开它。

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

要在加载时打开文件，您可以使用文档编辑器的创建事件。

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

示例 link 以在创建的事件中打开 SFDT 数据：https://stackblitz.com/edit/angular-7tvebw-3abz1v?file=app.component.html

要将 word 文档转换为 SFDT 以在编辑器中加载它，您需要 server-side 交互。

在server-side.

中，请参考以下文档将word文档转换为SFDT

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

您还可以查看以下文档platform-wise，了解文档编辑器所需的 Web 服务。

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/

有没有办法在 angular 8+ 中使用 ejs-documenteditorcontainer 在加载时默认打开 word（doc 或 docx）文件？

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

syncfusion

ejs

angular

ej2-syncfusion