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.
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.
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:
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.
Il nostro convertitore sarà basato su NodeJS. Quindi, per questo progetto, avremo bisogno di quanto segue:
– 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
}
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.
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){
}
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:
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>
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:
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!
This website uses cookies. By continuing to browse the website you agree to our privacy policy.
our privacy policy