如何将 ONLYOFFICE 文档与 Angular 同步

Angular 是一个免费的基于 TypeScript 的开源前端应用程序开发框架，广泛用于构建本机移动应用程序以及开发适用于 Linux、Windows 和 macOS 的安装应用程序。

如果您已经开发并开发了 Angular 应用程序，那么通过集成 ONLYOFFICE Docs（ONLYOFFICE Document Server）来实现企业内部的文档编辑和实时协作可能会有所帮助。得益于 ONLYOFFICE 开发人员为 Angular 框架开发的特殊功能，这种集成成为可能。

集成后，该软件包允许您安装 ONLYOFFICE 在线编辑器并在 Angular 环境中测试其功能。以下是您可以如何做到的。

关于 ONLYOFFICE 记录

您网站上的 PDF 文件。

该解决方案是开源的，需要在当地设施进行现场安装。例如，它可以安装在 Debian 和 Ubuntu 或其他基于 Linux 的发行版上。

ONLYOFFICE Docs 提供了易于使用的界面和完整的环境，因此您可以轻松打开和编辑任何复杂程度的文本文档、表单、视图和可填写表单。该套件与 Microsoft Word、Excel 和 PowerPoint 文件完全兼容，并支持其他流行格式，包括 ODF。

您可以在 ONLYOFFICE Workspace 中使用 ONLYOFFICE 套件，这是一个可用于协作和团队管理的平台，或将其与其他基于 Web 的应用程序或平台集成。

例如，您可以将 ONLYOFFICE Docs 与 Alfresco、Redmine 等集成。可用工会总数超过30个单位。

对于 ONLYOFFICE Docs，有一个适用于 Windows、Linux 和 macOS 的免费软件，可让您在线处理文档，还有适用于 Android 和 iOS 的免费移动应用程序。

ONLYOFFICE Docs提供开放的API并符合WOPI协议，因此软件开发人员可以轻松地将套件集成到他们的软件中。为此，有一个名为 ONLYOFFICE Docs Developer Edition 的特殊版本。

为 ONLYOFFICE 文档服务安装 Angular 组件

首先，需要安装ONLYOFFICE Docs（ONLYOFFICE文档服务器）。您可以使用适当的安装说明从 GitHub 获取它。

Angular 框架的 ONLYOFFICE 组件包含在 npm 注册表中。这就是为什么您需要使用以下命令从 npm 安装它：

$ npm install --save @onlyoffice/angular-document-editor

螺纹也可用于插入零件。只需运行这个命令：

$纱线添加@onlyoffice/角度文档编辑器

如何在 ONLYOFFICE 文档中使用 Angular 组件

安装成功后，您应该获得 DocumentEditorModule：

从'@angular/core'导入{NgModule}；

从“@onlyoffice/angular-document-editor”导入{DocumentEditorModule}；

@NgModule({

  声明：

    应用组件

  ],

  进口：[

    文档编辑器Angular模块

  ],

  引导程序：[AppComponent]

})

导出类 AppModule { } 。

之后，您需要在消费窗格中定义以下选项：

@成分（{...}）

导出类ExampleComponent { 导出类ExampleComponent { 导出类ExampleComponent { 导出类ExampleComponent { .

  配置：IConfig = {

    文档： {

      “文件类型”：“docx”

      “密钥”：“Khirz6zTPdfd7”

      "title": "示例文档标题.docx"

      “url”：“https://example.com/url-to-example-document.docx”

    },

    文档类型：“word”

    编辑器配置：{

      “callbackUrl”：“https://example.com/url-to-callback.ashx”

    },

  } }

  onDocumentReady = ( 事件 ) => {

    console.log("文档已加载");

  };

} }

下一步是将文档编辑器组件与模板中的选项结合使用：

<文档编辑器

  id =“docxForComments”

  documentServerUrl="http://documentserver/"

  [配置]=“配置”

  [events_onDocumentReady]="onDocumentReady"

></文档编辑器>

document-editor-Angular 中提供了所有可用选项的完整描述。

然后安装所有必需的项目依赖项：

$npm 安装

下一步是构建项目本身：

$ cd ./项目

$ ng build @onlyoffice/document-editor-Angular

创建工作表：

$ cd ./dist/onlyoffice/角度文档编辑器

$npm 包

最后，测试ONLYOFFICE功能：

$ cd ./项目

$ ng 测试 @onlyoffice/document-editor-Angular

就是这样！现在您可以看到 ONLYOFFICE Docs 如何在 Angular 应用程序中工作。

言鼎科技