Angular 是一個免費(fèi)的基于 TypeScript 的開源前端應(yīng)用程序開發(fā)框架，廣泛用于構(gòu)建本機(jī)移動應(yīng)用程序以及開發(fā)適用于 Linux、Windows 和 macOS 的安裝應(yīng)用程序。

如果您已經(jīng)開發(fā)并開發(fā)了 Angular 應(yīng)用程序，那么通過集成 ONLYOFFICE Docs（ONLYOFFICE Document Server）來實(shí)現(xiàn)企業(yè)內(nèi)部的文檔編輯和實(shí)時協(xié)作可能會有所幫助。得益于 ONLYOFFICE 開發(fā)人員為 Angular 框架開發(fā)的特殊功能，這種集成成為可能。

集成后，該軟件包允許您安裝 ONLYOFFICE 在線編輯器并在 Angular 環(huán)境中測試其功能。以下是您可以如何做到的。

關(guān)于 ONLYOFFICE 記錄

您網(wǎng)站上的 PDF 文件。

該解決方案是開源的，需要在當(dāng)?shù)卦O(shè)施進(jìn)行現(xiàn)場安裝。例如，它可以安裝在 Debian 和 Ubuntu 或其他基于 Linux 的發(fā)行版上。

ONLYOFFICE Docs 提供了易于使用的界面和完整的環(huán)境，因此您可以輕松打開和編輯任何復(fù)雜程度的文本文檔、表單、視圖和可填寫表單。該套件與 Microsoft Word、Excel 和 PowerPoint 文件完全兼容，并支持其他流行格式，包括 ODF。

您可以在 ONLYOFFICE Workspace 中使用 ONLYOFFICE 套件，這是一個可用于協(xié)作和團(tuán)隊管理的平臺，或?qū)⑵渑c其他基于 Web 的應(yīng)用程序或平臺集成。

例如，您可以將 ONLYOFFICE Docs 與 Alfresco、Redmine 等集成?？捎霉倲?shù)超過30個單位。

對于 ONLYOFFICE Docs，有一個適用于 Windows、Linux 和 macOS 的免費(fèi)軟件，可讓您在線處理文檔，還有適用于 Android 和 iOS 的免費(fèi)移動應(yīng)用程序。

ONLYOFFICE Docs提供開放的API并符合WOPI協(xié)議，因此軟件開發(fā)人員可以輕松地將套件集成到他們的軟件中。為此，有一個名為 ONLYOFFICE Docs Developer Edition 的特殊版本。

為 ONLYOFFICE 文檔服務(wù)安裝 Angular 組件

首先，需要安裝ONLYOFFICE Docs（ONLYOFFICE文檔服務(wù)器）。您可以使用適當(dāng)?shù)陌惭b說明從 GitHub 獲取它。

Angular 框架的 ONLYOFFICE 組件包含在 npm 注冊表中。這就是為什么您需要使用以下命令從 npm 安裝它：

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

螺紋也可用于插入零件。只需運(yùn)行這個命令：

$紗線添加@onlyoffice/角度文檔編輯器

如何在 ONLYOFFICE 文檔中使用 Angular 組件

安裝成功后，您應(yīng)該獲得 DocumentEditorModule：

從'@angular/core'導(dǎo)入{NgModule}；

從“@onlyoffice/angular-document-editor”導(dǎo)入{DocumentEditorModule}；

@NgModule({

  聲明：

    應(yīng)用組件

  ],

  進(jìn)口：[

    文檔編輯器Angular模塊

  ],

  引導(dǎo)程序：[AppComponent]

})

導(dǎo)出類 AppModule { } 。

之后，您需要在消費(fèi)窗格中定義以下選項：

@成分（{...}）

導(dǎo)出類ExampleComponent { 導(dǎo)出類ExampleComponent { 導(dǎo)出類ExampleComponent { 導(dǎo)出類ExampleComponent { .

  配置：IConfig = {

    文檔： {

      “文件類型”：“docx”

      “密鑰”：“Khirz6zTPdfd7”

      "title": "示例文檔標(biāo)題.docx"

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

    },

    文檔類型：“word”

    編輯器配置：{

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

    },

  } }

  onDocumentReady = ( 事件 ) => {

    console.log("文檔已加載");

  };

} }

下一步是將文檔編輯器組件與模板中的選項結(jié)合使用：

<文檔編輯器

  id =“docxForComments”

  documentServerUrl="http://documentserver/"

  [配置]=“配置”

  [events_onDocumentReady]="onDocumentReady"

></文檔編輯器>

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

然后安裝所有必需的項目依賴項：

$npm 安裝

下一步是構(gòu)建項目本身：

$ cd ./項目

$ ng build @onlyoffice/document-editor-Angular

創(chuàng)建工作表：

$ cd ./dist/onlyoffice/角度文檔編輯器

$npm 包

最后，測試ONLYOFFICE功能：

$ cd ./項目

$ ng 測試 @onlyoffice/document-editor-Angular

就是這樣！現(xiàn)在您可以看到 ONLYOFFICE Docs 如何在 Angular 應(yīng)用程序中工作。

言鼎科技