Erstellen Sie einen Online-Dokumentenkonverter mit ONLYOFFICE Konvertierungs-API

Die Dokumentenkonvertierung ist eine sehr beliebte und wertvolle Funktion, die uns bei der Arbeit mit verschiedenen Dokumententypen hilft. ONLYOFFICE Editors kann Dokumente problemlos in eine Vielzahl von Formaten konvertieren. Dieser Blogbeitrag zeigt Ihnen, wie Sie einen Online-Konverter erstellen, der auf der ONLYOFFICE Konvertierungs-API läuft.

Über ONLYOFFICE Konvertierungs-API

Der Konvertierungsdienst für Dokumente ermöglicht die Konvertierung aller Arten von Office-Dateien: Texte, Blätter, Folien, Formulare, PDF und E-Books. Er vereinfacht die Erstellung von PDF-Dateien aus Dokumenten und Tabellen, die Umwandlung von Lehrbüchern in E-Books, Präsentationen in Bilddateien und vieles mehr. ONLYOFFICE unterstützt mehr als 50 verschiedene Dokumenttypen.

So funktioniert es

Unsere Konvertierungs-API funktioniert über den Dokumentenkonvertierungsdienst. Er dient als Teil des ONLYOFFICE Document Servers und ermöglicht uns die Konvertierung verschiedener Dokumentdateien in die entsprechenden Formate.

Die Konvertierung wird in mehreren Schritten durchgeführt:

1. Benutzer wählen eine Datei aus, die in den Dokumentenmanager hochgeladen werden soll.
2. Der Dokumentenmanager lädt die ausgewählte Datei in den Dokumentenspeicherdienst hoch.
3. Der Dokumentenspeicherdienst sendet die hochgeladene Datei mithilfe der Konvertierungs-API an den Dokumentenkonvertierungsdienst.
4. Der Dokumentenkonvertierungsdienst konvertiert die ausgewählte Datei in das gewünschte Format.
5. Der Dokumentenspeicherdienst lädt die konvertierte Dokumentendatei herunter.

Dokumentenmanager und Dokumentenspeicherdienste sind client- und serverseitige Tools, die die Auswahl und Speicherung eines Dokuments für die weitere Konvertierung erleichtern. Unsere Webanwendung wird diese Aufgaben jedoch übernehmen, da wir einen benutzerdefinierten Konverter erstellen.

Was wir benötigen

Unser Konverter wird NodeJS-basiert sein. Für dieses Projekt brauchen wir also das Folgende:

• ONLYOFFICE Document Server
• NodeJS-Anwendung mit den folgenden installierten Paketen:

– Express

– Axios

– Jsonwebtoken

Wir werden das Axios-Paket verwenden, um eine Post-Anfrage an den ONLYOFFICE-Dokumentenserver zu senden, und das Jsonwebtoken-Paket, um ein JWT-Token zu signieren. Ab Version 7.2 ist die JWT-Authentifizierung standardmäßig aktiviert.

Alternativ gibt es die Möglichkeit, das ONLYOFFICE Document Server-Image mit deaktivierter JWT-Authentifizierung auszuführen. Führen Sie dazu den folgenden Befehl im Terminal aus:

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

Die Postanforderung, die unser Konverter an ONLYOFFICE Document Server sendet, lautet wie folgt:

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

• Mit dem Parameter accept geben wir an, dass wir eine Antwort im JSON-Format erhalten möchten.
• Der Parameter async gibt an, dass die Anforderung asynchron ist.
• Der Parameter fileType gibt den Typ der Originaldatei an, die konvertiert werden soll.
• Der Parameter key steht für den UID-Bezeichner des aktuellen Dokuments.
• Der Parameter outputType gibt das Format des konvertierten Dokuments an.
• Der Parameter title enthält den Namen des konvertierten Dokuments.
• Der Parameter url enthält einen Link zu der Datei, die konvertiert werden soll.

Die Werte der Parameter fileType, outputType und url werden von der Client-Seite unserer Anwendung abgerufen und in den Variablen gespeichert. Der Wert des Parameters key wird nach dem Zufallsprinzip generiert und ebenfalls in der Variable gespeichert.

Einrichtung des Projekts

Nach der Installation der erforderlichen Pakete gehen wir in die Datei app.js und initialisieren sie zusammen mit dem bodyParser, um die  post request Daten zu verarbeiten. Wir richten auch einen öffentlichen Ordner und eine View Engine ein:

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');

Dann fügen wir Routen hinzu. Unsere App wird eine Route für get und eine für post enthalten. Damit können wir die Eingabedaten abrufen und sie in die post-Anfrage an den ONLYOFFICE Document Server übergeben:

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

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

Auf der Client-Seite

Jetzt machen wir einen kleinen Umweg und schauen uns die Client-Seite unseres Konverters an. Dort werden wir alle erforderlichen Daten eingeben:

Die Client-Seite umfasst zwei EJS-Seiten:

• homepage.ejs – ermöglicht den Abruf aller für post request erforderlichen Werte.
• converter.ejs – ermöglicht das Herunterladen der konvertierten Datei.

Werfen wir einen genaueren Blick auf die homepage.ejs. Hier haben wir ein Formular erstellt, das Daten an die Route post sendet. Zunächst erhalten wir eine URL zur Originaldatei. Wir speichern sie in der Variable link auf der Serverseite:

<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()">

Dann wählen wir einen Typ der Originaldatei im Kombinationsfeld aus. Später werden wir diesen Wert abrufen und in der Variablen inputType speichern:

<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>

Dann wählen wir den gewünschten Dateityp aus. Dieser Wert wird in der outputType-Variable auf der Serverseite gespeichert:

<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>

Und wir verwenden eine Schaltfläche, um die gesamten Daten an post-Route des Konverters zu senden:

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

Erstellung eines Konverters

Die abgerufenen Daten werden auf der Serverseite unserer Anwendung geparst. Wechseln wir also zur Datei app.js und erhalten wir dies:

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

});

Werfen wir nun einen Blick auf unser zweites Kombinationsfeld, das den outputType-Wert an die post-Route sendet:

  <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>

Die Variable outputType ist in der post-Anfrage an den Server enthalten. Sie gibt das Format der konvertierten Datei an. Sehen wir uns den JavaScript-Code an, der es uns ermöglicht, mit den Seitenelementen zu interagieren und eine dynamische Liste in unsere Benutzeroberfläche einzubinden.

Der Dokumentenkonvertierungsdienst ist ein sehr leistungsfähiges Tool, das verschiedene Dateitypen konvertieren kann. Unser Ziel ist es also, eine dynamische Liste zu verwenden, die es uns ermöglicht, ein Format für die konvertierte Datei auszuwählen. In dieser Liste werden alle Optionen angezeigt, die für den jeweiligen Typ der Originaldatei verfügbar sind.

Zu diesem Zweck erstellen wir eine JSON-Datei, in der Werte entsprechend dem jeweiligen Typ gespeichert werden:

Hinweis! Zu Demonstrationszwecken haben wir nur die gängigsten OOXML-Formate berücksichtigt. Um alle unterstützten Konvertierungsoptionen zu erfahren, besuchen Sie unsere Dokumentation.

Dann fügen wir eine Funktion hinzu, die diese dynamische Liste erzeugt:

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

Zunächst erhält diese Funktion den Wert aus dem Kombinationsfeld inputType, in dem wir das Format der Originaldatei ausgewählt haben. Wir weisen ihn der Variablen type zu, um diesen Wert in der Folge zu verwenden. Dann wird eine AJAX-Anfrage gestellt, um die JSON-Daten zu laden. Danach verwenden wir den Wert der typ-Variable als Index und iterieren durch die geladenen Daten, um ihre Werte in die Optionen der Dropdown-Liste einzufügen.

Jedes Mal, wenn wir nun den Typ der Originaldatei auswählen, wird das Skript ausgeführt und zeigt uns die verfügbaren Konvertierungsoptionen in Übereinstimmung mit dem ursprünglichen Dateiformat an.

Und wenn wir alle erforderlichen Daten haben, senden wir sie an die Konvertierungsroute, indem wir auf die Schaltfläche Konvertieren klicken.

Aber das ist noch nicht alles. Um unsere Anwendung interaktiver zu gestalten, fügen wir Funktionen hinzu, die das Kombinationsfeld und die Schaltflächenelemente in der richtigen Reihenfolge aktivieren:

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

Der gesamte JavaScript-Code lautet wie folgt:

     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();
    };
        }

Lassen wir uns einmal die Server-Seite ansehen:

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

In der converter-Route haben wir unsere post-Anfrage an den ONLYOFFICE Document Server formuliert und in der payload-Variable gespeichert. Wir haben fileType-, outputType- und link-Variablen verwendet, die die abgerufenen Daten speichern. Wir haben jedoch auch die Variable key, die den eindeutigen Bezeichner des aktuellen Dokuments enthält. Deshalb haben wir oben eine kleine Funktion hinzugefügt, um sie zu erzeugen:

    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;
    };

Da wir nun alle erforderlichen Werte für unsere Anfrage haben, verwenden wir jwt.sign, um sie in ein Token zu verpacken:

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

Die Methode jwt.sign benötigt drei Parameter:

• Payload, die alle für die erfolgreiche Konvertierung erforderlichen Parameter enthalten.
• Header, der Informationen über den Verschlüsselungsalgorithmus und den Zeitrahmen für den Ablauf enthält. Wir haben diese Parameter in die Variable options verpackt.
• Secret, das einen von ONLYOFFICE Document Server generierten geheimen Schlüssel darstellt. Dieses Geheimnis finden Sie in der Datei local.json oder durch Ausführen des folgenden Befehls im Terminal:

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

Nachdem wir das Token signiert haben, verwenden wir eine axios post-Anfrage, um es an den Server zu senden. Dann wird die Seite converter.ejs gerendert, die die Antwort vom ONLYOFFICE Document Server erhält:

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

Hier ist ein Beispiel für die Antwort im JSON-Format:

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

Was hier benötigt wird, ist das fileUrl-Element. Es ist ein Link auf die konvertierte Datei. Also greifen wir darauf zu und senden es an die converter.ejs-Seite:

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

Auf dieser Seite haben wir zwei Schaltflächen erstellt. Die Schaltfläche “Zurück” bringt uns zurück zur Seite homepage.ejs und die Schaltfläche “Herunterladen” öffnet den Link, den wir an die Seite gesendet haben, und lädt die konvertierte Datei herunter:

Hinweis!  Mehr über JWT finden Sie in der Dokumentation.

Der gesamte serverseitige Code lautet wie folgt:

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'));

Und jetzt lassen wir unseren Konverter laufen und sehen, wie er funktioniert!

ONLYOFFICE-Lösungen sind äußerst vielseitig. Sie bieten Benutzern und Entwicklern eine einzigartige Erfahrung und ermöglichen es ihnen, OOXML-Dokumente auf verschiedene Weise zu bearbeiten. Wir hoffen, dass Sie die oben genannten Informationen nützlich finden und sie in Ihren zukünftigen Projekten anwenden werden. Hinterlassen Sie gerne Kommentare, stellen Sie Fragen oder teilen Sie uns Ihre Ideen mit. Wir sind offen für Vorschläge und Zusammenarbeit. Wir wünschen Ihnen viel Erfolg bei Ihren Erkundungen!