Как интегрировать документы ONLYOFFICE с Angular

Angular — это бесплатная среда разработки интерфейсных приложений с открытым исходным кодом на основе TypeScript, широко используемая для создания собственных мобильных приложений и создания настольных приложений для Linux, Windows и macOS.

Если вы разрабатываете и запускаете приложения на основе Angular, возможно, было бы неплохо включить редактирование документов и совместную работу в режиме реального времени в вашем сервисе, интегрировав ONLYOFFICE Docs (ONLYOFFICE Document Server) ). Такая интеграция возможна благодаря уникальному компоненту, разработанному для фреймворка Angular разработчиками ONLYOFFICE.

При интеграции компонент позволяет вам установить онлайн-редакторы ONLYOFFICE и протестировать их производительность в вашей среде Angular. Вот как вы можете это сделать.

О документах ONLYOFFICE

ONLYOFFICE Docs — это веб-офисный пакет, который позволяет работать с текстовыми документами, электронными таблицами, презентациями, заполняемыми формами и PDF-файлами в веб-браузере.

Решение имеет открытый исходный код и требует локального развертывания на локальном сервере. Например, его можно установить в Debian и Ubuntu или других дистрибутивах на базе Linux.

ONLYOFFICE Docs предлагает удобный интерфейс и полный набор функций, позволяющих легко открывать и редактировать текстовые документы, электронные таблицы, презентации и заполняемые формы любой сложности. Пакет полностью совместим с файлами Microsoft Word, Excel и PowerPoint и поддерживает другие популярные форматы, включая ODF.

Вы можете использовать пакет ONLYOFFICE в ONLYOFFICE Workspace, платформе с открытым исходным кодом для совместной работы и управления командой, или интегрировать его с другим веб-приложением или платформой.

Например, вы можете интегрировать Документы ONLYOFFICE с Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine и т. д. Общее количество доступных интеграций — более 30.

Для ONLYOFFICE Docs есть бесплатное настольное приложение для Windows, Linux и macOS, позволяющее работать с документами в автономном режиме, а также бесплатные мобильные приложения для Android и iOS.

ONLYOFFICE Docs предоставляет открытый API и совместим с протоколом WOPI, поэтому разработчики программного обеспечения могут легко встраивать этот пакет в свои программные инструменты. Для этого существует специальная версия ONLYOFFICE Docs Developer Edition.

Установите компонент Angular для Сервера документов ONLYOFFICE

Прежде всего, на вашем сервере должна быть установлена ONLYOFFICE Docs (Сервер документов ONLYOFFICE). Вы можете получить его с GitHub, воспользовавшись соответствующей инструкцией по установке.

Компонент ONLYOFFICE для платформы Angular доступен в реестре npm. Вот почему вам необходимо установить его из npm с помощью этой команды:

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

Также возможна установка компонента с помощью yarn. Просто запустите эту команду:

yarn add @onlyoffice/document-editor-angular

Как использовать компонент Angular в документации ONLYOFFICE

После успешной установки вам необходимо импортировать DocumentEditorModule:

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

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

После этого вам необходимо определить следующие параметры в вашем потребляющем компоненте:

@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");
  };
}

Следующим шагом будет использование компонента document-editor с параметрами вашего шаблона:

<document-editor 
  id="docxForComments" 
  documentServerUrl="http://documentserver/"
  [config]="config"
  [events_onDocumentReady]="onDocumentReady"
></document-editor>

Полное описание всех доступных опций доступно на странице document-editor-angular.

Дальнейшее развитие

Затем установите все необходимые зависимости проекта:

npm install

Следующий шаг — сборка самого проекта:

cd ./projects
ng build @onlyoffice/document-editor-angular

Создайте пакет проекта:

cd ./dist/onlyoffice/document-editor-angular
npm pack

Наконец, протестируйте компонент ONLYOFFICE:

cd ./projects
ng test @onlyoffice/document-editor-angular

Вот и все! Теперь вы можете увидеть, как Документы ONLYOFFICE работают в вашем приложении Angular.