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

Question

在这里，我尝试使用 [(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'

}

score 3 · Accepted Answer

最后我找到了一个窍门。我不知道为什么 Syncfusion 在他们的文档中没有提到这个 api。但它有效！Stackblitz 演示在这里。您可以ejs-documenteditorcontainer按照这个想法加载您的word文件。

添加到 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 文件转换为SFDTSyncfusion.EJ2.WordEditor.AspNet.Core格式并使用文档编辑器打开它，或者您可以通过 Web API 服务实现使用 .NET Standard 库进行此文件转换。

您可以从 Syncfusion 查看此文档以了解详细信息。