Créez un convertisseur de documents en ligne avec l’API de conversion ONLYOFFICE

La conversion de documents est une fonction très populaire et précieuse qui nous aide à travailler avec plusieurs types de documents. Les solutions ONLYOFFICE peuvent facilement convertir des documents dans une large gamme de formats. Ce billet de blog vous montrera comment construire un convertisseur en ligne qui fonctionne avec l’API de conversion ONLYOFFICE.

À propos de l’API de conversion ONLYOFFICE

Le service de conversion de documents permet de convertir tous les types de documents Office : 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 fichiers images, et plus encore. ONLYOFFICE prend en charge plus de 50 types de documents différents.

Comment cela fonctionne

Notre API de conversion fonctionne via le service de conversion de documents. Il fait partie de ONLYOFFICE Document Server et nous 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 ciblé.
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, notre application web se chargera de ces tâches puisque nous construisons un convertisseur personnalisé.

Prérequis

Notre convertisseur sera basé sur NodeJS. Ainsi, pour ce projet, nous aurons besoin des éléments suivants :

• ONLYOFFICE Document Server
• Application NodeJS avec les paquets suivants installés :

– Express

– Axios

– Jsonwebtoken

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

Alternativement, il existe 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, otputType et url sont récupérées du côté client de notre 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.

Mise en place du projet

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){
}

Côté client

Faisons maintenant un petit détour par le côté client de notre convertisseur. C’est là que nous allons saisir toutes les données nécessaires :

Le côté client comprend deux pages EJS :

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

Regardons de plus près le fichier homepage.ejs. Ici, nous avons créé un formulaire qui envoie des données à la route postale. Tout d’abord, nous obtenons une URL vers le fichier original. Nous allons la stocker 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>

Construction d’un convertisseur

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 page de 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 clé 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 :

À noter ! Pour en savoir plus sur JWT, visitez notre page de 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'));

Maintenant, exécutons notre convertisseur et voyons comment il fonctionne !

Les solutions ONLYOFFICE sont extrêmement multifonctionnelles. Elles offrent aux utilisateurs et aux développeurs une expérience unique et leur permettent de manipuler les documents OOXML de différentes manières. Nous espérons que les informations mentionnées ci-dessus vous seront utiles et que vous les appliquerez dans vos futurs projets. N’hésitez pas à poser des questions ou à partager vos idées avec nous. Nous sommes ouverts aux suggestions et à la coopération. Bonne chance dans vos explorations !