ONLYOFFICE : comment créer un convertisseur de documents en ligne avec l’API de conversion ONLYOFFICE

Les solutions ONLYOFFICE peuvent facilement convertir des documents dans une large gamme de formats pour permettre leur édition ultérieure. Dans ce tutoriel, nous allons vous montrer comment construire un convertisseur en ligne qui fonctionne avec l’API de conversion ONLYOFFICE.

Le service de conversion de documents permet de convertir tous les types de documents, y compris textes, feuilles de calcul, diapositives, formulaires, PDF et livres électroniques. Il facilite la création de PDF à partir de documents texte et de feuilles de calcul, la conversion de manuels en livres électroniques, de présentations en images, et plus encore. ONLYOFFICE prend en charge plus de 50 types de documents différents.

L'API de conversion fonctionne avec des services de conversion de documents. Elle fait partie de ONLYOFFICE Document Server et permet de convertir divers fichiers de documents dans les formats appropriés.

La conversion s’effectue en plusieurs étapes :

1. L’utilisateur sélectionne un fichier qui doit être téléchargé vers le gestionnaire de documents ;
2. Le gestionnaire de documents télécharge le fichier sélectionné vers le service de stockage de documents ;
3. Le service de stockage de documents envoie le fichier téléchargé au service de conversion de documents en utilisant l’API de conversion ;
4. Le service de conversion de documents convertit le fichier sélectionné au format nécessaire ;
5. Le service de stockage de documents télécharge le fichier du document converti.

Les services de gestion et de stockage de documents sont des outils côté client et côté serveur qui facilitent la sélection et le stockage d’un document en vue d’une conversion ultérieure. Cependant, l’application web se chargera de ces tâches puisque nous construisons un convertisseur personnalisé.

Le convertisseur que nous construisons sera basé sur NodeJS. Pour sa construction, les éléments suivants sont nécessaires :

• ONLYOFFICE Document Server installé
• Application NodeJS avec les paquets suivants installés : Express, Axios, JSON Web Token

Nous allons utiliser le paquet Axios pour envoyer une requête post à ONLYOFFICE Document Server et le paquet JSON Web Token pour signer un jeton JWT. À partir de la version 7.2, l’authentification JWT est activée par défaut.

Il existe aussi une option pour exécuter l’image ONLYOFFICE Document Server avec l’authentification JWT désactivée. Pour ce faire, exécutez la commande suivante dans le terminal :

sudo docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver

La requête post que notre convertisseur envoie à ONLYOFFICE Document Server est la suivante :

{
        "async": true,
        "filetype": fileType,
        "key": key, 
        "outputtype": outputType,
        "title": `Converted Document.${outputType}`,
        "url": link      
    }

• Dans le paramètre accept, nous spécifions que nous souhaitons recevoir une réponse au format JSON.
• Le paramètre async indique que la demande est asynchrone.
• Le paramètre fileType spécifie le type du fichier original que nous allons convertir.
• Le paramètre key représente l’identifiant UID du document actuel.
• Le paramètre outputType indique le format du document converti.
• Le paramètre titre contient le nom du document converti.
• Le paramètre url comprend un lien vers le fichier que nous voulons convertir.

Les valeurs des paramètres fileType, outputType et url sont récupérées du côté client de l’application et stockées dans les variables. La valeur du paramètre key sera générée aléatoirement et stockée dans la variable également.

Après avoir installé les paquets requis, nous allons dans le fichier app.js et les initialisons avec le bodyParser pour traiter les données de la requête post. Nous configurons également un dossier public et un moteur de vue :

const express = require('express');
const app = express();
const axios = require('axios'); 
const jwt = require('jsonwebtoken');
 
 
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(express.static("public"));
app.set('view engine', 'ejs');

Ensuite, nous ajoutons des routes. Notre application comprendra une route get et une route post. Elles nous permettront de récupérer les données d’entrée et de les passer dans la requête post à ONLYOFFICE Document Server :

app.get ('/', function (reg, response){ 
}
 
app.post ('/converter', function(req, response){
}

Maintenant, il faut faire un petit détour par le côté client de notre convertisseur. C’est là qu’il faut saisir toutes les données nécessaires :

Le côté client comprend deux pages EJS :

• homepage.ejs – permet de récupérer toutes les valeurs requises pour la requête post ;
• converter.ejs – permet de télécharger le fichier converti.

Dans fichier homepage.ejs, nous avons créé un formulaire qui envoie des données à la route postale. Tout d’abord, il faut obtenir une URL vers le fichier original. Elle sera stockée dans la variable link du côté serveur :

<h1 class="h3 mb-3 font-weight-normal">Convert your OOXML files here!</h1>
        <input type="text"  class="form-control" id="inputEmail" placeholder="Paste a link to the file" name="link" onchange="activateBox()">

Ensuite, nous choisissons le type du fichier d’origine dans la boîte combo. Plus tard, nous irons chercher cette valeur et la stocker dans la variable inputType :

<select class="form-control" id="inputType" input type="text" disabled="true" name="inputType" onchange="comboBox()">
          <option value="" selected>Input File Type</option>
          <option value="docx">docx</option>
          <option value="txt">txt</option>
          <option value="pdf">pdf</option>
          <option value="rtf">rtf</option>
          <option value="xml">xml</option>
          <option value="csv">csv</option>
          <option value="xlsx">xlsx</option>
          <option value="xls">xls</option>
          <option value="ppt">ppt</option>
          <option value="pptx">pptx</option>
</select>

Puis nous choisissons le type de fichier souhaité. Cette valeur sera stockée dans la variable outputType du côté du serveur :

<select class="form-control" id="outputType" input type="text" disabled="true" name="outputType" onchange="activateButton()">
      <option value="" disabled selected hidden>Output File Type</option>
    </select>

Et nous utilisons un bouton pour envoyer l’ensemble des données au convertisseur post route :

<div class="button">
      <button type="submit" id="download" disabled="true" class="btn btn-lg btn-primary btn-block">Convert</button>
    </div>
    </form>

Les données récupérées seront analysées du côté serveur de notre application. Donc maintenant, allons dans le fichier app.js et récupérons-le :

app.post ('/converter', function(req, response){
    let link = req.body.link;
    let outputType = req.body.outputType;
    let fileType = req.body.inputType;
 
});

Voyons maintenant notre deuxième boîte combo qui envoie la valeur outputType à la route post :

<select class="form-control" id="outputType" input type="text" disabled="true" name="outputType" onchange="activateButton()">
      <option value="" disabled selected hidden>Output File Type</option>
    </select>

La variable outputType est incluse dans la requête post vers le serveur. Elle spécifie le format du fichier converti. Examinons le code JavaScript qui nous permet d’interagir avec les éléments de la page et d’incorporer une liste dynamique dans notre interface utilisateur.

Le service de conversion de documents est un outil très puissant, et il est capable de convertir différents types de fichiers. Notre objectif est donc d’utiliser une liste dynamique qui nous permettra de sélectionner un format pour le fichier converti. Cette liste affichera toutes les options disponibles pour le type particulier de fichier d’origine.

Pour ce faire, nous créons un fichier JSON qui stocke les valeurs en accord avec chaque type particulier :

À noter ! À des fins de démonstration, nous n’avons inclus que les formats OOXML les plus courants. Pour connaître toutes les options de conversion prises en charge, consultez notre documentation.

Puis nous ajoutons une fonction qui va générer cette liste dynamique :

 function comboBox () {
     let type = document.querySelector("#inputType").value;
     let listDropDown = document.querySelector("#outputType");
     fetch("formats.json")
    .then(function(response){
      return response.json();
    })
    .then(function(data){
     let options = data[type];
     let out = "";
     out += `<option value="">Output File Type</option>`;
     Object.values(options).map(function(format){
        out += '<option value=' + format + '>' + format + '</option>';
      });
     listDropDown.innerHTML = out;
     listDropDown.disabled = false;
               });  
    };
        };

Tout d’abord, cette fonction récupère la valeur de la liste déroulante inputType, dans laquelle nous avons sélectionné le format du fichier d’origine. Nous l’affectons à la variable type afin d’utiliser cette valeur ultérieurement. Ensuite, nous faisons une requête AJAX pour charger les données JSON. Après cela, nous utilisons la valeur de la variable de type comme un index et nous itérons à travers les données chargées pour insérer leurs valeurs dans les options de la liste déroulante.

Désormais, chaque fois que nous sélectionnons le type de fichier d’origine, le script s’exécute et nous montre les options de conversion disponibles en fonction du format du fichier d’origine.

Une fois que nous avons toutes les données requises, nous les envoyons à la route du convertisseur en cliquant sur le bouton Convertir.

Mais ce n’est pas tout. Pour rendre notre application plus interactive, nous allons ajouter des fonctions qui activeront la boîte combo et les boutons dans le bon ordre :

function activateBox() {
      $("#inputType").prop('disabled', false)
    };
    
    function activateButton() {
      $("#download").prop('disabled', false)
      $("#outputTypeForm").hide();
    };

Le code JavaScript complet est le suivant :

     function comboBox () {
     let type = document.querySelector("#inputType").value;
     let listDropDown = document.querySelector("#outputType");
     fetch("formats.json")
    .then(function(response){
      return response.json();
    })
    .then(function(data){
     let options = data[type];
     let out = "";
     out += `<option value="">Output File Type</option>`;
     Object.values(options).map(function(format){
        out += '<option value=' + format + '>' + format + '</option>';
      });
     listDropDown.innerHTML = out;
     listDropDown.disabled = false;
               });  
    };
    function activateBox() {
      $("#inputType").prop('disabled', false)
    };
    
    function activateButton() {
      $("#download").prop('disabled', false)
      $("#outputTypeForm").hide();
    };
        }

Voyons ce qui se passe du côté du serveur :

app.post ('/converter', function(req, response){
    let link = req.body.link;
    let outputType = req.body.outputType;
    let fileType = req.body.inputType;
    let key =  function () {
        var key = '';
        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 
                'abcdefghijklmnopqrstuvwxyz0123456789';
          
        for (let i = 1; i <= 12; i++) {
            var char = Math.floor(Math.random()
                        * str.length + 1);
              
            key += str.charAt(char);
        }
          
        return key;
    };
    const payload =  { 
        "async": true,
        "filetype": fileType,
        "key": key, 
        "outputtype": outputType,
        "title": `Converted Document.${outputType}`,
        "url": link       
    }
    let token = jwt.sign(payload, secret, options);
    
    axios.post( 
        'http://127.0.0.1:83/ConvertService.ashx',
        { 
           "token": token
        }) 
        .then((res) => response.render('converter.ejs', {
            link: res.data.fileUrl
        })) 
});

Dans la route du convertisseur, nous avons formé notre requête post vers ONLYOFFICE Document Server et l’avons stockée dans la variable payload. Nous avons utilisé les variables fileType, outputType, et link qui stockent les données que nous avons récupérées. Cependant, nous avons également la variable key qui contient l’identifiant unique du document actuel. Nous avons donc ajouté une petite fonction ci-dessus pour le générer :

    let key =  function () {
        var key = '';
        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 
                'abcdefghijklmnopqrstuvwxyz0123456789';
          
        for (let i = 1; i <= 12; i++) {
            var char = Math.floor(Math.random()
                        * str.length + 1);
              
            key += str.charAt(char)
        }   
        return key;
    };

Maintenant que nous avons toutes les valeurs nécessaires pour notre requête, nous utilisons jwt.sign pour les envelopper dans un jeton :

let token = jwt.sign(payload, secret, options);

La méthode jwt.sign prend trois paramètres :

• le payload qui comprend tous les paramètres nécessaires à la réussite de la conversion ;
• l’en-tête qui contient des informations sur l’algorithme de chiffrement et le délai d’expiration. Nous avons enveloppé ces paramètres dans la variable options ;
• secret qui représente une clef secrète générée par ONLYOFFICE Document Server. Ce secret peut être trouvé dans le fichier local.json ou en exécutant la commande suivante dans le terminal :

sudo docker exec <dockerID> /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string'

Après avoir signé le jeton, nous utilisons une requête axios post pour l’envoyer au serveur. Ensuite, nous rendons la page converter.ejs qui reçoit la réponse d’ONLYOFFICE Document Server :

axios.post( 
        'http://127.0.0.1:83/ConvertService.ashx',
        { 
           "token": token
        }) 
        .then((res) => response.render('converter.ejs', {
            link: res.data.fileUrl

Voici un exemple de réponse au format JSON :

{     "endConvert": true,     "fileType": "docx",     "fileUrl": "https://documentserver/url-to-converted-document.pdf",     "percent": 100 }

Ce qu’il faut ici, c’est l’élément fileUrl. C’est un lien vers le fichier converti. Nous y accédons donc et l’envoyons à la page converter.ejs :

.then((res) => response.render('converter.ejs', {
            link: res.data.fileUrl
        })) 
});

Sur cette page, nous avons créé deux boutons. Le bouton Retour nous ramène à la page homepage.ejs et le bouton Télécharger ouvre le lien que nous avons envoyé à la page et télécharge le fichier converti :

Pour en savoir plus sur JWT, visitez notre documentation.

L’ensemble du code côté serveur est le suivant :

const express = require('express');
const app = express();
const axios = require('axios'); 
const jwt = require('jsonwebtoken');
const options = {algorithm: "HS256", expiresIn: "5m"};
const secret = "k1gWQdmDX6ZGiWw5r3g2";
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.get ('/', function (reg, response){ 
    response.render('homepage.ejs', {
    })
});
app.post ('/converter', function(req, response){
    let link = req.body.link;
    let outputType = req.body.outputType;
    let fileType = req.body.inputType;
    let key =  function () {
        var key = '';
        var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + 
                'abcdefghijklmnopqrstuvwxyz0123456789';
          
        for (let i = 1; i <= 12; i++) {
            var char = Math.floor(Math.random()
                        * str.length + 1);
              
            key += str.charAt(char);
        }
          
        return key;
    };
    const payload =  { 
        "async": true,
        "filetype": fileType,
        "key": key, 
        "outputtype": outputType,
        "title": `Converted Document.${outputType}`,
        "url": link       
    }
    let token = jwt.sign(payload, secret, options);
    
    axios.post( 
        'http://127.0.0.1:83/ConvertService.ashx',
        { 
           "token": token
        }) 
        .then((res) => response.render('converter.ejs', {
            link: res.data.fileUrl
        })) 
});
app.listen(3000,() => console.log('the server is up and running'));

• Documentation API
• Obtenir ONLYOFFICE Document Server

• Les meilleurs cours et tutoriels pour apprendre ONLYOFFICE

Nous tenons à remercier Malick pour la mise au gabarit et escartefigue pour la relecture orthographique.