Cómo implementar solo los documentos de Oficina en Angular

Angular es un marco de desarrollo de aplicaciones frontal gratuito y de código abierto basado en TypeScript ampliamente utilizado para construir aplicaciones móviles nativas y crear aplicaciones instaladas de escritorio para Linux, Windows y MacOS.

Si desarrolla y ejecuta aplicaciones basadas en angular, podría ser una buena idea habilitar la edición de documentos y la colaboración en tiempo real dentro de su servicio integrando Onlyfice Docs (Onlyfice Office Document Server). Dicha integración es posible debido a un componente único desarrollado para el marco angular por los desarrolladores de la oficina única.

Cuando está integrado, el componente le permite instalar el Onlyoffice editores en línea y pruebe su rendimiento dentro de su entorno angular. Aquí sabrás como podrás hacerlo.

Acerca de Onlyfice Docs

OnlyOffice Docs es un paquete de oficina basado en la web que le permite trabajar con documentos de texto, hojas de cálculo, presentaciones, formularios más rellenos y archivos PDF en su navegador web.

La solución es de código abierto y requiere la implementación local en un servidor local. Por ejemplo, se puede instalar en Debian y Ubuntu u otras distribuciones basadas en Linux.

Onlyfice Docs Ofrece una interfaz fácil de usar y un conjunto completo de características para que pueda abrir y editar fácilmente documentos de texto, hojas de cálculo, presentaciones y formularios de cualquier complejidad. La suite es completamente compatible con los archivos de Microsoft Word, Excel y PowerPoint y admite otros formatos populares, incluido ODF.

Puedes usar el Onlyoffice Suite dentro de OnlyOffice Workspace, una plataforma de código abierto para el trabajo colaborativo y la gestión de equipos, o integrarlo con otra aplicación o plataforma basada en la web.

Por ejemplo, puede integrar Onlyfice Docs con NextCloud, Moodle, Confluence, OwnCloud, WordPress, SeaFile, SharePoint, Allesco, Redmine, etc. El número total de integraciones disponibles es más de 30.

Para Onlyfice Docs, Hay una aplicación de escritorio gratuita para Windows, Linux y MacOS, que le permite trabajar con documentos fuera de línea, y aplicaciones móviles gratuitas para Android e iOS.

Onlyfice Docs proporciona abierto API y es compatible con el Wopi Protocolo, por lo que los desarrolladores de software pueden incrustar fácilmente la suite en sus herramientas de software. Para este propósito, hay una versión especial llamada OnlyOffice Docs Developer Edition.

Instale el componente angular para el servidor de documentos OnlyOffice

En primer lugar, necesitas tener Onlyfice Docs (Onlyfice Office Document Server) instalado en su servidor. Puede obtenerlo de GitHub utilizando las instrucciones de instalación correspondientes.

El componente Onone Office para el marco angular está disponible en el registro de NPM. Por eso necesitas instalarlo desde npm con este comando:

Instalación de $ npm --save @OnlyOffice/document-editor-angular 

Instalación del componente utilizando hilo también es posible. Solo ejecuta este comando:

$ yarn add @OnlyOffice/document-editor-angular 

Cómo usar el componente angular en OnlyOffice Docs

Después de una instalación exitosa, debe importar Documentititormodule:

import ngmodule de '@angular/core'; import documentAditModule de "@OnlyOffice/Document-Editor-Angular"; @Ngmodule (Declaraciones: [appComponent], importaciones: [documentEditorAngularModule], bootstrap: [appComponent]) Exportar clase APPMODULE  

Después de eso, debe definir las siguientes opciones en su componente de consumo:

@Component (...) Exportar clase Ejecomplecomponent config: iconfig = Document: "fileType": "docx", "clave": "khirz6ztpdfd7", "título": "Título de documento de ejemplo.docx "," url ":" https: // ejemplo.com/url-to-exame-document.docx ", documentType:" Word ", EditorConfig: " CallBackUrl ":" https: // Ejemplo.com/url-to llame.ashx ", onDocumentReady = (event) => consola.log ("el documento está cargado"); ;  

El siguiente paso es usar el editor de documentos componente con las opciones en su plantilla:

Una descripción completa de todas las opciones disponibles está disponible en documento-editor-angular.

Desarrollo adicional

Luego instale todas las dependencias del proyecto requeridas:

Instalación de $ npm 

El siguiente paso es construir el proyecto en sí:

$ CD ./Proyectos $ ng build @OnlyOffice/document-editor-angular 

Crea el paquete del proyecto:

$ CD ./Dist/OnlyOffice/Document-editor-angular $ npm Pack 

Finalmente, pruebe el componente Onone Office:

$ CD ./Proyectos $ ng test @OnlyOffice/document-editor-angular 

Eso es todo! Ahora puedes ver como Onlyfice Docs funciona dentro de tu Angular aplicación.