angular中使用onlyoffice进行word文档在线编辑

onlyoffice官网地址

tips：需要后端和前端配合

1、安装@onlyoffice包 npm i @onlyoffice/document-editor-angular

2、在appModule引入DocumentEditorModule

import { NgModule } from '@angular/core';
import { DocumentEditorModule } from "@onlyoffice/document-editor-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DocumentEditorAngularModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、html

<document-editor 
  id="docxForComments" 
  documentServerUrl="http://documentserver/"
  [config]="config"
  [events_onDocumentReady]="onDocumentReady"
></document-editor>
<!-- documentServerUrl是文档服务器地址 -->

4、ts

@Component({...})
export class ExampleComponent {
  config: IConfig = {
    document: {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx" // 文件地址
    },
    documentType: "word",
    editorConfig: {
      "callbackUrl": "https://example.com/url-to-callback.ashx"
    },
  }

  onDocumentReady = (event) => {
    console.log("Document is loaded");
  };
}

5、效果如下