Com integrar ONLYOFFICE Docs amb Angular


Angular és un marc de desenvolupament d'aplicacions de front-end gratuït i de codi obert basat en TypeScript àmpliament utilitzat per crear aplicacions mòbils natives i crear aplicacions instal·lades a l'escriptori per a Linux, Windows i macOS.

Si desenvolupeu i executeu aplicacions basades en Angular, pot ser una bona idea habilitar l'edició de documents i la col·laboració en temps real dins del vostre servei integrant ONLYOFFICE Docs (ONLYOFFICE Document Server). Aquesta integració és possible gràcies a un component únic desenvolupat per al framework Angular pels desenvolupadors d'ONLYOFFICE.

Quan està integrat, el component us permet instal·lar els editors en línia ONLYOFFICE i provar el seu rendiment dins del vostre entorn Angular. Aquí teniu com podeu fer-ho.

Sobre ONLYOFFICE Docs

Fitxers PDF al vostre navegador web.

La solució és de codi obert i requereix un desplegament local en un servidor local. Per exemple, es pot instal·lar a Debian i Ubuntu o altres distribucions basades en Linux.

ONLYOFFICE Docs ofereix una interfície fàcil d'utilitzar i un conjunt complet de funcions perquè pugueu obrir i editar fàcilment documents de text, fulls de càlcul, presentacions i formularis omplibles de qualsevol complexitat. La suite és totalment compatible amb fitxers de Microsoft Word, Excel i PowerPoint i admet altres formats populars, inclòs ODF.

Podeu utilitzar la suite ONLYOFFICE a ONLYOFFICE Workspace, una plataforma de codi obert per al treball col·laboratiu i la gestió d'equips, o integrar-la amb una altra aplicació o plataforma basada en web.

Per exemple, podeu integrar ONLYOFFICE Docs amb Alfresco, Redmine, etc. El nombre total d'integracions disponibles és de més de 30.

Per a ONLYOFFICE Docs, hi ha una aplicació d'escriptori gratuïta per a Windows, Linux i macOS, que us permet treballar amb documents fora de línia i aplicacions mòbils gratuïtes per a Android i iOS.

ONLYOFFICE Docs ofereix una API oberta i és compatible amb el protocol WOPI, de manera que els desenvolupadors de programari poden incrustar fàcilment la suite a les seves eines de programari. Amb aquest propòsit, hi ha una versió especial anomenada ONLYOFFICE Docs Developer Edition.

Instal·leu el component angular per al servidor de documents ONLYOFFICE

En primer lloc, heu de tenir els documents ONLYOFFICE (servidor de documents ONLYOFFICE) instal·lats al vostre servidor. Podeu obtenir-lo des de GitHub mitjançant les instruccions d'instal·lació corresponents.

El component ONLYOFFICE per al marc Angular està disponible al Registre npm. És per això que cal instal·lar-lo des de npm amb aquesta comanda:

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

També és possible la instal·lació del component amb fil. Només heu d'executar aquesta comanda:

$ yarn add @onlyoffice/document-editor-angular

Com utilitzar el component angular a ONLYOFFICE Docs

Després d'una instal·lació correcta, heu d'importar DocumentEditorModule:

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

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

Després d'això, heu de definir les opcions següents al vostre component de consum:

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

El següent pas és utilitzar el component d'editor de documents amb les opcions de la plantilla:

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

Una descripció completa de totes les opcions disponibles està disponible a document-editor-angular.

A continuació, instal·leu totes les dependències necessàries del projecte:

$ npm install

El següent pas és construir el projecte en si:

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

Creeu el paquet del projecte:

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

Finalment, proveu el component ONLYOFFICE:

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

Això és! Ara podeu veure com funciona ONLYOFFICE Docs a la vostra aplicació Angular.