Crea un convertitore di documenti online con l’API di Conversione di ONLYOFFICE
La conversione dei documenti è una funzionalità molto popolare e preziosa che ci aiuta a operare con più tipi di documenti. ONLYOFFICE Editors può convertire facilmente i documenti in un’ampia gamma di formati. Questo post sul blog ti mostrerà come creare un convertitore online che funzioni su ONLYOFFICE Conversion API. 
Informazioni sull’API di Conversione di ONLYOFFICE
Il servizio di conversione dei documenti consente di convertire tutti i tipi di documenti Office: testi, fogli, diapositive, moduli, PDF ed eBook. Facilita la creazione di PDF da documenti e fogli, la conversione di libri di testo in eBook, presentazioni in file di immagini e altro ancora. ONLYOFFICE supporta più di 50 diversi tipi di documenti.
Come funziona
La nostra API di conversione opera tramite il servizio di conversione dei documenti. Fa parte di ONLYOFFICE Document Server e ci consente di convertire vari file di documenti nei formati appropriati.
La conversione viene eseguita in diversi passi:
- L’utente seleziona un file che deve essere caricato nel gestore di documenti.
- Il gestore di documenti carica il file selezionato nel servizio di archiviazione dei documenti.
- Il servizio di archiviazione dei documenti invia il file caricato al servizio di conversione dei documenti utilizzando l’API di conversione.
- Il servizio di conversione dei documenti converte il file selezionato nel formato target.
- Il servizio di archiviazione dei documenti scarica il file del documento convertito.
I servizi di gestione dei documenti e di archiviazione dei documenti sono strumenti lato client e server che facilitano la selezione e l’archiviazione di un documento per un’ulteriore conversione. Tuttavia, la nostra applicazione Web affronterà tali attività poiché stiamo costruendo un convertitore personalizzato.
Prerequisiti
Il nostro convertitore sarà basato su NodeJS. Quindi, per questo progetto, avremo bisogno di quanto segue:
- ONLYOFFICE Document Server
- Applicazione NodeJS con i seguenti pacchetti installati:
– Express
– Axios
– Jsonwebtoken
Utilizzeremo il pacchetto Axios per inviare un post request a ONLYOFFICE Document Server e il pacchetto Jsonwebtoken per firmare un token JWT. A partire dalla versione 7.2, l’autenticazione JWT è abilitata per impostazione predefinita.
In alternativa, c’è un’opzione per eseguire l’immagine ONLYOFFICE Document Server con l’autenticazione JWT disabilitata. Per fare ciò, esegui il seguente comando nel terminale:
sudo docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver
Post request che il nostro convertitore sta inviando a ONLYOFFICE Document Server è la seguente:
{
"async": true,
"filetype": fileType,
"key": key,
"outputtype": outputType,
"title": `Converted Document.${outputType}`,
"url": link
}
- Nel parametro accept, specifichiamo che vogliamo ricevere una risposta in formato JSON.
- Il parametro async indica che la richiesta è asincrona.
- Il parametro fileType specifica il tipo di file originale che andremo a convertire.
- Il parametro key rappresenta l’identificatore UID del documento corrente.
- Il parametro outputType indica il formato del documento convertito.
- Il parametro title contiene il nome del documento convertito.
- Il parametro url include un collegamento al file che vogliamo convertire.
I valori dei parametri fileType, otputType e url vengono recuperati dal lato client della nostra applicazione e memorizzati nelle variabili. Anche il valore del parametro key verrà generato casualmente e memorizzato nella variabile.
Creazione del progetto
Dopo aver installato i pacchetti richiesti, andiamo al file app.js e li inizializziamo insieme a bodyParser per elaborare i dati del post request. Abbiamo anche impostato una cartella pubblica e un motore di visualizzazione:
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');
Quindi aggiungiamo percorsi. La nostra app includerà un percorso di ricezione e un percorso post. Ci permetteranno di recuperare i dati di input e passarli nel post request a ONLYOFFICE Document Server:
app.get ('/', function (reg, response){
}
app.post ('/converter', function(req, response){
}
Client-side
Ora facciamo una piccola deviazione ed esaminiamo il lato client del nostro convertitore. È qui che inseriremo tutti i dati richiesti:
Il lato cliente include due pagine EJS:
- homepage.ejs – ci permette di recuperare tutti i valori richiesti per il post request.
- converter.ejs – ci permette di scaricare il file convertito.
Diamo un’occhiata più da vicino a homepage.ejs. Qui abbiamo creato un modulo che invia i dati al percorso postale. Innanzitutto, otteniamo un URL del file originale. Lo memorizzeremo nella variabile link sul lato server:
<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()">
Quindi selezioniamo un tipo di file originale nella casella combinata. Successivamente, recupereremo questo valore e lo memorizzeremo nella variabile 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>
Quindi scegliamo il tipo di file desiderato. Questo valore verrà archiviato nella variabile outputType sul lato server:
<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>
E usiamo un pulsante per inviare tutti i dati al percorso post del convertitore:
<div class="button">
<button type="submit" id="download" disabled="true" class="btn btn-lg btn-primary btn-block">Convert</button>
</div>
</form>
Costruzione del convertitore
I dati recuperati verranno analizzati sul lato server della nostra applicazione. Quindi ora andiamo al file app.js e prendiamolo:
app.post ('/converter', function(req, response){
let link = req.body.link;
let outputType = req.body.outputType;
let fileType = req.body.inputType;
});
Ora diamo un’occhiata alla nostra seconda casella combinata che invia il valore outputType al post route:
<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 variabile outputType è inclusa nel post request al server. Specifica il formato del file convertito. Esaminiamo il codice JavaScript che ci consente di interagire con gli elementi della pagina e incorporare un elenco dinamico nella nostra interfaccia utente.
Il servizio di conversione dei documenti è uno strumento molto potente ed è in grado di convertire vari tipi di file. Quindi il nostro obiettivo è utilizzare un elenco dinamico che ci consenta di selezionare un formato per il file convertito. Questo elenco visualizzerà tutte le opzioni disponibili per il particolare tipo di file originale.
Per fare ciò, creiamo un file JSON che memorizza i valori in base a ciascun particolare tipo:
Nota! A scopo dimostrativo, abbiamo incluso solo i formati OOXML più comuni. Per conoscere tutte le opzioni di conversione supportate, visita la nostra pagina della documentazione.
Quindi aggiungiamo una funzione che genererà questo elenco dinamico:
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;
});
};
};
Innanzitutto, questa funzione ottiene il valore della casella combinata inputType, dove abbiamo selezionato il formato del file originale. Lo assegniamo alla variabile di tipo per utilizzare questo valore lungo la linea. Quindi facciamo una richiesta AJAX per caricare i dati JSON. Successivamente, usiamo il valore della variabile di tipo come indice e iteriamo attraverso i dati caricati per inserire i suoi valori nelle opzioni dell’elenco a discesa.
Ora, ogni volta che selezioniamo il tipo di file originale, lo script viene eseguito e ci mostra le opzioni di conversione disponibili in accordo con il formato del file originale.
E dopo aver ottenuto tutti i dati richiesti, li inviamo al percorso del convertitore facendo clic sul pulsante Convertire.
Ma non è così. Per rendere la nostra app più interattiva, aggiungeremo funzioni che attiveranno la casella combinata e gli elementi dei pulsanti nella giusta sequenza:
function activateBox() {
$("#inputType").prop('disabled', false)
};
function activateButton() {
$("#download").prop('disabled', false)
$("#outputTypeForm").hide();
};
L’intero codice JavaScript è il seguente:
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();
};
}
Diamo un’occhiata a cosa sta succedendo sul lato server:
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
}))
});
Nel percorso del convertitore, abbiamo formato post request al Document Server di ONLYOFFICE e l’abbiamo archiviata nella variabile payload. Abbiamo utilizzato le variabili fileType, outputType e link che memorizzano i dati che abbiamo recuperato. Tuttavia, abbiamo anche la variabile key che contiene l’identificatore univoco del documento corrente. Quindi abbiamo aggiunto una piccola funzione sopra per generarlo:
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;
};
Ora che abbiamo tutti i valori necessari per la nostra richiesta, usiamo jwt.sign per avvolgerli in un token:
let token = jwt.sign(payload, secret, options);
Il metodo jwt.sign accetta tre parametri:
- Payload che include tutti i parametri richiesti per la corretta conversione.
- Header che contiene informazioni sull’algoritmo di cifratura e l’intervallo di tempo di scadenza. Abbiamo racchiuso questi parametri nella variabile options..
- Secret che rappresenta una chiave segreta generata da ONLYOFFICE Document Server. Questo segreto può essere trovato nel local.json file o eseguendo il seguente comando nel terminale:
sudo docker exec <dockerID> /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string'
Dopo aver firmato il token, utilizziamo post request axios per inviarlo al server. Quindi eseguiamo il rendering della pagina converter.ejs che riceve la risposta da 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
}))Ecco un esempio della risposta in formato JSON:
{ "endConvert": true, "fileType": "docx", "fileUrl": "https://documentserver/url-to-converted-document.pdf", "percent": 100 }
Quello che serve qui è l’elemento fileUrl. È un collegamento al file convertito. Quindi accediamo e lo inviamo alla pagina converter.ejs:
.then((res) => response.render('converter.ejs', {
link: res.data.fileUrl
}))
});
In quella pagina, abbiamo creato due pulsanti. Il pulsante Go back ci riporta alla pagina homepage.ejs e il pulsante Download apre il collegamento che abbiamo inviato alla pagina e scarica il file convertito:
Nota! Per saperne di più su JWT, visita la nostra pagina della documentazione. L’intero codice lato server è il seguente:
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'));
E ora, eseguiamo il nostro convertitore e vediamo come funziona!
Le soluzioni ONLYOFFICE sono estremamente multifunzionali. Forniscono agli utenti e agli sviluppatori un’esperienza unica e consentono loro di manipolare i documenti OOXML in vari modi. Ci auguriamo che troverai utili le informazioni sopra menzionate e che le applicherai nei tuoi progetti futuri. Non esitare a lasciare commenti, porre domande o condividere le tue idee con noi. Siamo aperti a suggerimenti e collaborazione. Buona fortuna per i tuoi sforzi esplorativi!
