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'

}

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 标准库 Syncfusion.EJ2.WordEditor.AspNet 进行此文件转换。核心由Web API服务实现。

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