Kā integrēt ONLYOFFICE dokumentus ar Angular

Angular ir uz TypeScript balstīta bezmaksas un atvērtā koda priekšgala lietojumprogrammu izstrādes ietvars, ko plaši izmanto vietējo mobilo lietojumprogrammu izveidei un darbvirsmā instalētu lietotņu izveidei operētājsistēmām Linux, Windows un macOS.

Ja izstrādājat un palaidāt uz Angular balstītas lietojumprogrammas, varētu būt laba ideja iespējot dokumentu rediģēšanu un reāllaika sadarbību savā pakalpojumā, integrējot ONLYOFFICE dokumentus (ONLYOFFICE dokumentu serveri). Šāda integrācija ir iespējama, pateicoties unikālam komponentam, ko Angular ietvaram izstrādājuši ONLYOFFICE izstrādātāji.

Integrējot, komponents ļauj instalēt ONLYOFFICE tiešsaistes redaktorus un pārbaudīt to veiktspēju jūsu Angular vidē. Lūk, kā to izdarīt.

Par ONLYOFFICE dokumentiem

PDF failus savā tīmekļa pārlūkprogrammā.

Risinājums ir atvērtā pirmkoda, un tam ir nepieciešama lokāla izvietošana vietējā serverī. Piemēram, to var instalēt Debian un Ubuntu vai citos Linux balstītos izplatījumos.

ONLYOFFICE Docs piedāvā lietotājam draudzīgu saskarni un pilnu funkciju komplektu, lai jūs varētu viegli atvērt un rediģēt teksta dokumentus, izklājlapas, prezentācijas un jebkuras sarežģītības aizpildāmas veidlapas. Komplekts ir pilnībā saderīgs ar Microsoft Word, Excel un PowerPoint failiem un atbalsta citus populārus formātus, tostarp ODF.

ONLYOFFICE komplektu varat izmantot ONLYOFFICE Workspace, atvērtā koda platformā sadarbībai un komandas pārvaldībai, vai integrēt to ar citu tīmekļa lietotni vai platformu.

Piemēram, varat integrēt ONLYOFFICE dokumentus ar Alfresco, Redmine un tā tālāk. Kopējais pieejamo integrāciju skaits ir vairāk nekā 30.

Pakalpojumam ONLYOFFICE Docs ir bezmaksas darbvirsmas lietotne operētājsistēmai Windows, Linux un macOS, kas ļauj strādāt ar dokumentiem bezsaistē, un bezmaksas mobilās lietotnes operētājsistēmām Android un iOS.

ONLYOFFICE Docs nodrošina atvērtu API un ir saderīgs ar WOPI protokolu, tāpēc programmatūras izstrādātāji var viegli iegult komplektu savos programmatūras rīkos. Šim nolūkam ir īpaša versija ar nosaukumu ONLYOFFICE Docs Developer Edition.

Instalējiet leņķisko komponentu ONLYOFFICE dokumentu serverim

Pirmkārt, jūsu serverī ir jābūt instalētam ONLYOFFICE dokumentiem (ONLYOFFICE dokumentu serverim). To var iegūt no GitHub, izmantojot atbilstošās instalēšanas instrukcijas.

Angular ietvara ONLYOFFICE komponents ir pieejams npm reģistrā. Tāpēc jums tas jāinstalē no npm ar šo komandu:

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

Iespējama arī komponenta uzstādīšana, izmantojot dziju. Vienkārši palaidiet šo komandu:

$ yarn add @onlyoffice/document-editor-angular

Kā lietot leņķisko komponentu ONLYOFFICE dokumentos

Pēc veiksmīgas instalēšanas jums ir jāimportē DocumentEditorModule:

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

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

Pēc tam patērējošajā komponentā ir jādefinē šādas opcijas:

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

Nākamais solis ir izmantot dokumentu redaktora komponentu ar opcijām savā veidnē:

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

Pilns visu pieejamo opciju apraksts ir pieejams document-editor-angular.

Pēc tam instalējiet visas nepieciešamās projekta atkarības:

$ npm install

Nākamais solis ir paša projekta izveide:

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

Izveidojiet projekta paketi:

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

Visbeidzot, pārbaudiet komponentu ONLYOFFICE:

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

Tieši tā! Tagad jūs varat redzēt, kā ONLYOFFICE dokumenti darbojas jūsu Angular lietotnē.