有没有一种方法可以在默认情况下使用Angle 8+中的ejs-documenteditorcontainer打开worddoc或docx文件？

问题描述

在这里，我尝试使用[[ngModel）]渲染Word文件，但无法按要求工作。还有其他办法吗？

我用过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'

}

解决方法

最后我找到了一个把戏。我不知道为什么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 格式并使用文档编辑器打开它，或者可以通过Web API服务实现使用.NET Standard库Syncfusion.EJ2.WordEditor.AspNet.Core进行此文件转换。

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

,

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

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

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

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

在创建的事件https://stackblitz.com/edit/angular-7tvebw-3abz1v?file=app.component.html

中打开SFDT数据的示例链接。

要将单词文档转换为SFDT以便将其加载到编辑器中，需要服务器端交互。

请参考以下文档，以在服务器端将Word文档转换为SFDT。

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

您还可以从平台上查看以下文档编辑器所需的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/