Ajoutez des fonctionnalités de bureau à votre application Web avec uniquement Office

Cet article a été créé en partenariat avec OnlyOffice. Merci de soutenir les partenaires qui rendent le point de point possible.

Chaque fois que nous nous retrouvons à essayer d'ajouter des fonctionnalités complexes à une application, la question se pose: «Dois-je rouler le mien?» Et à moins que votre objectif ne soit de construire cette fonctionnalité, la réponse est presque toujours un «non» droit.

ce dont vous avez besoin est quelque chose pour vous aider à accéder à un MVP le plus rapidement possible, et la meilleure façon d'y parvenir est d'utiliser une solution complète à l'emploi qui peut vous aider à gagner du temps, qui, dans tourner, se traduit par une économie sur les coûts de développement.

Je suppose que vous êtes toujours là parce que ce qui précède résonne avec vous. Donc, maintenant que nous sommes synchronisés, ce que je veux vous montrer dans cet article, c'est à quel point il est facile d'intégrer uniquement Office dans votre application Web.

Les plats clés

• OnlyOffice fournit une suite de bureaux complète hautement compatible avec les formats Microsoft Office et OpenDocument, qui peuvent être intégrés directement dans les applications Web pour les documents, la feuille de calcul et la gestion de la présentation.
• L'édition du développeur de OnlyOffice permet une personnalisation et une intégration approfondies dans les applications, offrant une option «étiquette blanche» pour marquer les éditeurs comme vôtre.
• La configuration uniquement de l'office consiste à installer le seul document de document (serveur de documents) localement et à implémenter les demandes d'API pour gérer les documents au sein de votre application, avec la prise en charge de plusieurs langages de programmation.
• L'intégration unique de laOffice permet la création, l'édition, la suppression et le suivi des documents directement au sein de votre application Web, améliorant l'interaction et la productivité des utilisateurs sans avoir besoin d'applications externes.
• La collaboration en temps réel est prise en charge dans uniquement Office, permettant à plusieurs utilisateurs de modifier les documents simultanément et de se voir les modifications de l'autre en direct.
• Le processus d'intégration est conçu pour être simple, visant à aider les développeurs à obtenir un produit minimum viable (MVP) rapidement et de manière rentable, avec une documentation suffisante et un soutien communautaire disponibles pour l'aide.

Qu'est-ce que uniquement Office?

à partir de leur site Web:

OnlyOffice propose la suite de bureaux la plus riche en fonctionnalités disponibles, très compatible avec les formats de fichiers Microsoft Office et OpenDocument. Voir, modifier et travailler en collaboration avec des documents, des feuilles de calcul et des présentations directement à partir de votre application Web.

La suite Office a plusieurs éditions. Dans cet article, nous allons utiliser Edition Developer, car nous voulons intégrer les éditeurs dans l'application qui sera ensuite livrée à de nombreux utilisateurs en tant que service cloud ou installation sur site.

Si vous souhaitez utiliser uniquement Office dans une solution Sync & Share existante, vous devriez consulter Enterprise Edition. Une liste des intégrations est ici.

Edition du développeur

L'édition du développeur vous donne non seulement suffisamment de liberté pour intégrer les éditeurs dans votre application, mais il est également livré avec une option «étiquette blanche» qui vous permet de personnaliser pleinement les éditeurs pour les utiliser sous votre propre marque.

Intégration du serveur de documents

Pour vous intégrer à votre application Web, vous devez d'abord télécharger les seuls documents Office (emballés sous forme de serveur de documents) et le configurer sur votre serveur local.

Après l'avoir installé, vous pouvez commencer à implémenter les demandes de gestion des documents sur votre serveur. OnlyOffice fournit de très beaux exemples pour .net, java, node.js, php, python et ruby.

Vous pouvez télécharger le serveur de documents et votre exemple préféré et l'essayer immédiatement sur votre machine.

Je vais montrer comment vous pouvez commencer à vous intégrer dans votre application. À cette fin, nous utiliserons un exemple très simple avec Node.js et Express. Je n'entrerai pas dans les détails de la mise en œuvre, je vais présenter les éléments essentiels de l'os nu et vous permettre de remplir les blancs pour construire un système robuste et évolutif.

J'ai une application avec la structure suivante:

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

Nous utiliserons le dossier public / documents pour stocker les documents. Le fichier app.js est l'endroit où se trouve notre code d'application Express, et index.html est l'endroit où nous allons afficher nos documents. J'ai abandonné un fichier exemple.docx dans le dossier Documents à des fins de test.

Les fichiers d'arborescence dans public / échantillons / sont les fichiers vierges que nous copierons lors de la «création» de nouveaux fichiers.

Le dossier de sauvegarde, comme vous le verrez plus loin, nous aidera non seulement à maintenir les sauvegardes des versions précédentes, mais nous aidera également à générer l'identifiant unique de nos documents après les avoir modifiés.

Les fichiers publics / css / main.css et public / javascript / main.js seront utilisés par index.html. Nous examinerons cela plus tard.

Jetons un coup d'œil au fichier app.js:

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

Ce que nous faisons, c'est servir les fichiers en tant que localhost: 3000 / documents / nom de fichier.

J'ai également pris de l'avance sur moi-même et ajouté SyncRequest, FS et BodyParser. Ceux-ci ne sont pas pertinents pour le moment, mais nous les utiliserons plus tard.

Réponction des documents

Pour afficher les documents disponibles, nous devrons obtenir une liste de tous les noms de fichiers et les envoyer au client. Nous allons créer l'itinéraire / documents pour ceci:

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

Créer des documents

Au début, nous aurons juste un exemple de document, mais ce n'est pas du tout amusant. Ajoutons A / Create Route pour nous aider à ajouter certains fichiers. Nous allons simplement prendre un nom de fichier et copier le modèle correspondant dans le dossier public / documents avec son nouveau nom:

app<span>.post("/create", async (req<span>, res</span>) => {
</span>  <span>const ext = path.extname(req.query.fileName);
</span>  <span>const fileName = req.query.fileName;
</span>
  <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext);
</span>  <span>const newFilePath = path.join(__dirname, "public/documents", fileName);
</span>
  <span>// Copy the sample file to the documents folder with its new name.
</span>  <span>try {
</span>    fs<span>.copyFileSync(samplePath, newFilePath);
</span>    res<span>.sendStatus(200);
</span>  <span>} catch (e) {
</span>    res<span>.sendStatus(400);
</span>  <span>}
</span><span>});
</span>

Supprimer les documents

Nous avons également besoin d'un moyen de supprimer des documents. Créons une route / supprimer:

app<span>.delete("/delete", (req<span>, res</span>) => {
</span>  <span>const fileName = req.query.fileName;
</span>  <span>const filePath = path.join(__dirname, "public/documents", fileName);
</span>
  <span>try {
</span>    fs<span>.unlinkSync(filePath);
</span>    res<span>.sendStatus(200);
</span>  <span>} catch (e) {
</span>    res<span>.sendStatus(400);
</span>  <span>}
</span><span>});
</span>

Celui-ci est super simple. Nous supprimerons le fichier et enverrons un code d'état de 200 pour informer l'utilisateur que tout s'est bien passé. Sinon, ils obtiendront un code d'état 400.

Enregistrer les documents

Jusqu'à présent, nous pouvons ouvrir nos documents pour l'édition, mais nous n'avons aucun moyen de sauver nos modifications. Faisons cela maintenant. Nous allons ajouter une route A / Track pour enregistrer nos fichiers:

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

Il s'agit d'un problème délicat, car il va être utilisé par le serveur de documents lorsque le fichier est enregistré par l'éditeur. Comme vous pouvez le voir, nous retournons "{" Error ": 0}", qui indique au serveur que tout va bien.

Lorsque l'éditeur est fermé, la version actuelle du fichier sera sauvegardée en public / sauvegarde / fileName-history / avec l'heure actuelle en millisecondes comme nom du fichier. Nous utiliserons le nom du fichier plus tard dans l'avant, comme vous le verrez.

Dans cet exemple, nous remplaçons la sauvegarde précédente chaque fois que nous en enregistrons une nouvelle. Comment allez-vous garder plus de sauvegardes?

Récupérer les sauvegardes

Nous aurons besoin d'un moyen d'obtenir les sauvegardes d'un fichier particulier, nous ajoutons donc une route A / Backups pour gérer ceci:

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

Ici, nous nous assurons que le dossier de sauvegarde de ce fichier existe et le renvoi d'un tableau de tous les fichiers de sauvegarde de ce dossier. Oui, cela vous aidera dans votre tâche de garder plus de sauvegardes pour un seul fichier. Je ne peux pas continuer à faire tout le travail pour vous!

Ouverture d'un document dans le navigateur

Nous verrons comment nous pouvons ouvrir nos documents pour modifier directement dans le navigateur en utilisant uniquement des documents.

Tout d'abord, nous allons créer un fichier html simple:

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

Comme vous pouvez le voir, il n'y a pas grand-chose dans ce fichier. Nous avons le DIV Planholder où l'éditeur sera attaché. Ensuite, il y a les documents Div, qui contient les contrôles pour créer des documents et un conteneur pour la liste des noms de fichiers.

Ci-dessous, nous avons le script avec l'API JavaScript pour le serveur de documents. Gardez à l'esprit que vous devrez peut-être remplacer l'hôte par l'emplacement de votre serveur de documents. Si vous l'avez installé avec la commande docker que je vous ai donnée, vous devriez être prêt à partir.

Enfin, il y a la balise de script, où nous importons notre javascript frontal et le fichier main.js, où nous aurons un accès global à l'objet Docsapi.

CSS

Avant d'arriver à coder, terminons la disposition avec un CSS pour rendre notre application plus utilisable et moins laide. Ajoutez ce qui suit à main.css:

app<span>.post("/create", async (req<span>, res</span>) => {
</span>  <span>const ext = path.extname(req.query.fileName);
</span>  <span>const fileName = req.query.fileName;
</span>
  <span>const samplePath = path.join(__dirname, "public/samples", "new" + ext);
</span>  <span>const newFilePath = path.join(__dirname, "public/documents", fileName);
</span>
  <span>// Copy the sample file to the documents folder with its new name.
</span>  <span>try {
</span>    fs<span>.copyFileSync(samplePath, newFilePath);
</span>    res<span>.sendStatus(200);
</span>  <span>} catch (e) {
</span>    res<span>.sendStatus(400);
</span>  <span>}
</span><span>});
</span>

Affichage des documents disponibles

avec cela à l'écart, nous sommes prêts à commencer à codager le frontal. Nous allons commencer par répertorier les fichiers dans le dossier Documents. Allez sur le Main.js et ajoutez le code suivant:

app<span>.delete("/delete", (req<span>, res</span>) => {
</span>  <span>const fileName = req.query.fileName;
</span>  <span>const filePath = path.join(__dirname, "public/documents", fileName);
</span>
  <span>try {
</span>    fs<span>.unlinkSync(filePath);
</span>    res<span>.sendStatus(200);
</span>  <span>} catch (e) {
</span>    res<span>.sendStatus(400);
</span>  <span>}
</span><span>});
</span>

Ici, en haut, nous obtenons les paramètres de requête pour savoir si nous ouvrons un fichier ou non. Si nous le sommes, nous appellerons la fonction EditDocument. Ne vous inquiétez pas, nous allons créer celui-ci plus tard.

Si nous n'ouvrons pas de fichier, nous voulons afficher une liste des fichiers disponibles et les contrôles pour en créer plus. Dans ListDocuments, nous nous assurons d'abord de masquer l'espace réservé et de clarifier la liste pour nous assurer que nous le créons à nouveau. Ensuite, nous appelons la route / documents que nous avons créée plus tôt pour obtenir tous les fichiers, les itérer et créer les éléments correspondants. Nous identifierons chaque élément avec le nom de fichier comme ID. De cette façon, nous pouvons facilement les récupérer plus tard.

Notez que nous appelons la fonction addDocumentHTML, que nous réutiliserons plus tard pour ajouter de nouveaux fichiers.

Pour chacun de ces documents, nous appelons également l'OpenDocument, que nous avons défini en bas, et sur le symbole croisé, nous appelons le Dresedocument, que nous définirons ensuite.

Suppression des documents

Pour supprimer nos documents, nous inviterons l'utilisateur s'il est sûr avant d'aller de l'avant et d'appeler l'itinéraire / supprimer et de passer nucléaire sur ce fichier. Au lieu de gaspiller un autre appel à notre API, nous vérifions que le statut retourné est de 200 pour supprimer directement les éléments DOM:

- node_modules
- public
    - backups
    - css
        - main.css
    - documents
        - sample.docx
    - javascript
        - main.js
    - samples
        - new.docx
        - new.xlsx
        - new.pptx
- app.js
- index.html
- package.json

Créer des documents

Vous vous souvenez de cette fonction que nous appelions dans l'onclick des contrôles de création de documents? Vous y allez:

<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span>  res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>

très simple. Nous invitons le nom, appelons la route / création avec cela comme paramètre de nom de fichier, et si l'état revient comme 200, nous appelons le addDocumentHTML pour ajouter directement les éléments DOM.

Ouverture des documents dans unique

Maintenant, nous devons définir la fonction EditDocument. Ajoutez le code suivant à main.js:

app<span>.get("/documents", (req<span>, res</span>) => {
</span>  <span>const docsPath = path.join(__dirname, "public/documents");
</span>  <span>const docsPaths = fs.readdirSync(docsPath);
</span>
  <span>const fileNames = [];
</span>
  docsPaths<span>.forEach(filePath => {
</span>    <span>const fileName = path.basename(filePath);
</span>    fileNames<span>.push(fileName);
</span>  <span>});
</span>
  res<span>.send(fileNames);
</span><span>});
</span>

Donc, nous avons ajouté trois fonctions. Concentrons-nous sur les deux derniers premiers. (Nous allons parler de l'éditDocument dans un instant.)

Le GenerateKey nous aidera également en générant la clé. Il s'agit d'un identifiant de document unique utilisé pour la reconnaissance des documents par le service. Il peut avoir une longueur maximale de 20 et pas de caractères spéciaux. Et voici l'astuce: il doit être régénéré à chaque fois que le document est enregistré. Voyez-vous où cela va? Exactement! Nous allons profiter de nos noms de fichiers de sauvegarde pour générer nos clés.

Comme vous pouvez le voir, pour générer la clé, nous récupérons notre seule sauvegarde (le cas échéant) et en utilisant son nom ou autrement, nous obtenons l'heure actuelle en millisecondes s'il n'y en a pas.

Que devait changer dans cette fonction si vous deviez prendre en charge plus de sauvegardes?

[s'enfuit]

Le GetDocumentType renverra le texte, la feuille de calcul ou la présentation. SeulOffice a besoin de cela pour savoir quel éditeur s'ouvrir.

L'EditDocument est ce pour quoi nous sommes ici. C’est ce que vous attendiez depuis le début. Ici, nous instancions l'objet Docorditor transmettant l'ID de notre div d'espace réservé et un objet avec un tas de configurations.

Configuration du doctorat

Ce que je vous ai montré jusqu'à présent, ce sont les options minimales requises pour instancier le docditeur. Vous devez consulter la section Paramètres avancés dans les documents pour voir comment vous pouvez profiter de toutes les différentes options. En attendant, permettez-moi de vous guider à travers les fondamentaux.

En haut, nous avons le champ de document qui prend un objet contenant les informations concernant le document que nous voulons ouvrir.

Ensuite, nous avons le DocumentType, qui, comme nous l'avons vu plus tôt, peut être soit du texte, de la feuille de calcul ou de la présentation.

juste en dessous, c'est l'objet EditorConfig, qui vous permet de définir des choses comme la vérification orthographique, l'unité et le zoom, entre autres. Dans ce cas, nous utilisons simplement le callbackurl, qui est l'URL de la route / piste que le serveur de documents utilisera pour enregistrer le fichier.

Conclusion

Nous avons atteint la fin, et vous espérons que vous avez appris à configurer et à intégrer uniquement les documents de bureau avec votre application Web. Il y a beaucoup de choses que nous laissons de côté, comme les autorisations, le partage, la personnalisation et beaucoup d'autres choses que vous pouvez faire avec uniquement.

J'espère que vous avez suffisamment d'informations pour continuer à améliorer votre produit, ou peut-être même une inspiration pour démarrer un nouveau projet à partir de zéro. Il n'y a pas de temps comme le présent.

D'accord, je vous verrai dans le prochain. En attendant, continuez à coder et n'oubliez pas de vous amuser pendant que vous y êtes!

Les questions fréquemment posées (FAQ) sur l'ajout de fonctionnalités de bureau à votre application Web avec uniquement Office

Comment puis-je intégrer uniquement Office dans mon application Web existante?

Intégrer uniquement Office dans votre application Web existante implique quelques étapes. Tout d'abord, vous devez installer le seul serveur de documents Office, qui est le cœur de OnlyOffice. Cela peut être fait à l'aide de Docker, qui est la méthode recommandée, ou manuellement. Une fois le serveur de documents installé, vous pouvez utiliser la seule API Office pour l'intégrer dans votre application Web. L'API fournit un ensemble de méthodes pour travailler avec des documents, des feuilles de calcul et des présentations. Vous pouvez utiliser ces méthodes pour ouvrir, modifier et enregistrer des documents dans votre application Web.

Quels sont les avantages de l'utilisation uniquement de Office dans mon application Web?

OnlyOffice offre plusieurs avantages pour les applications Web. Il permet aux utilisateurs de créer, afficher et modifier des documents directement dans l'application, sans avoir besoin de les télécharger ou d'utiliser un programme distinct. Cela peut considérablement améliorer l'expérience utilisateur et la productivité. OnlyOffice prend également en charge la collaboration en temps réel, permettant à plusieurs utilisateurs de travailler simultanément sur le même document. De plus, OnlyOffice prend en charge un large éventail de formats de documents, y compris les formats Microsoft Office et les formats OpenDocument.

Puis-je utiliser uniquement Office avec React?

Oui, seul Office peut être utilisé avec React. L'API OnlyOffice fournit un composant React que vous pouvez utiliser pour intégrer uniquement Office dans votre application React. Ce composant fournit un ensemble d'accessoires et de méthodes pour travailler avec des documents. Vous pouvez utiliser ces accessoires et méthodes pour ouvrir, éditer et enregistrer des documents dans votre application React.

Comment puis-je personnaliser l'interface unique de Office?

La seule interface Office peut être personnalisée à l'aide de l'objet de personnalisation fourni par la seule API Office. Cet objet vous permet de modifier l'apparence et le comportement de l'interface unique. Par exemple, vous pouvez modifier la palette de couleurs, masquer ou afficher certains boutons, et activer ou désactiver certaines fonctionnalités.

est uniquement sécurisé Office?

Oui, seul Office est conçu avec la sécurité à l'esprit. Il utilise le cryptage SSL pour protéger les données en transit et vous permet de contrôler qui a accès à vos documents. En outre, OnlyOffice est open source, ce qui signifie que son code est accessible au public et à un examen minutieux.

Est-ce que seul Office prend en charge la collaboration en temps réel?

Oui, seul Office prend en charge la collaboration en temps réel. Cela signifie que plusieurs utilisateurs peuvent travailler simultanément sur le même document, en se voyant les modifications de l'autre en temps réel. Cela peut considérablement améliorer le travail d'équipe et la productivité.

Puis-je utiliser uniquement Office avec d'autres frameworks JavaScript?

Oui, seul Office peut être utilisé avec d'autres frameworks JavaScript, tels que Angular et Vue. L'API OnlyOffice fournit des composants pour ces frameworks, vous permettant d'intégrer uniquement Office dans votre application angulaire ou Vue.

Quels types de documents puis-je travailler dans unique Formats de documents, y compris les formats Microsoft Office (tels que .docx, .xlsx et .pptx) et les formats OpenDocument (tels que .oDT, .ods et .oDP). Il prend également en charge d'autres formats, tels que .txt et .csv.

Puis-je utiliser uniquement Office sur les appareils mobiles?

Oui, seul Office est réactif et peut être utilisé sur les appareils mobiles. Cela signifie que les utilisateurs peuvent créer, afficher et modifier des documents sur leurs smartphones ou tablettes, offrant une expérience transparente sur les appareils.

Y a-t-il une communauté pour les développeurs de Office uniquement?

Oui, il y a un Communauté pour uniquement les développeurs. Cette communauté fournit un forum aux développeurs pour poser des questions, partager des conseils et des astuces et collaborer sur des projets. C'est une excellente ressource pour quiconque se développe avec OnlyOffice.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!