Crea un convertidor en línea con la API de conversión ONLYOFFICE
La conversión de documentos es una característica muy popular y importante que nos ayuda a trabajar con múltiples tipos de documentos. Los productos de ONLYOFFICE pueden fácilmente convertir documentos a una amplia gama de formatos. Esta entrada de blog tiene como objetivo explicar cómo crear un convertidor en línea que funciona con la API de conversión ONLYOFFICE.
Acerca de la API de conversión ONLYOFFICE
El servicio de conversión de documentos permite convertir todo tipo de documentos ofimáticos: textos, hojas, diapositivas, formularios, PDF y ebooks. Además, permite crear archivos PDF a partir de documentos y hojas, convertir libros de texto en ebooks, presentaciones en archivos de imagen y mucho más. ONLYOFFICE soporta más de 50 tipos de documentos diferentes.
Cómo funciona
Nuestra API de conversión funciona a través del servicio de conversión de documentos, que sirve como una parte del Servidor de Documentos ONLYOFFICE y nos permite convertir varios archivos de documentos en los formatos apropiados.
La conversión se realiza en varios pasos:
- El usuario selecciona un archivo que desea cargar en el gestor de documentos.
- El gestor de documentos carga el archivo seleccionado en el servicio de almacenamiento de documentos.
- El servicio de almacenamiento de documentos envía el archivo cargado al servicio de conversión de documentos mediante la API de conversión.
- El servicio de conversión de documentos convierte el archivo seleccionado al formato deseado.
- El servicio de almacenamiento de documentos descarga el archivo convertido.
Los servicios de gestión y almacenamiento de documentos son herramientas del lado del cliente y del servidor que facilitan la selección y el almacenamiento de un documento para su conversión posterior. Sin embargo, nuestra aplicación web se encargará de esas tareas, ya que estamos creando un conversor personalizado.
Requisitos
Nuestro convertidor estará basado en NodeJS. Así que para este proyecto, necesitaremos lo siguiente:
- Servidor de Documentos ONLYOFFICE
- Aplicación NodeJS con los siguientes paquetes instalados:
– Express
– Axios
– Jsonwebtoken
Usaremos el paquete Axios para enviar una solicitud post al Servidor de Documentos ONLYOFFICE y el paquete Jsonwebtoken para firmar un token JWT. A partir de la versión 7.2, la autenticación JWT está activada por defecto.
Alternativamente, hay una opción para ejecutar la imagen del Servidor de Documentos ONLYOFFICE con la autenticación JWT desactivada. Para ello, ejecutamos el siguiente comando en el terminal:
sudo docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver
La solicitud post que nuestro convertidor está enviando al Servidor de Documentos ONLYOFFICE es la siguiente:
{
"async": true,
"filetype": fileType,
"key": key,
"outputtype": outputType,
"title": `Converted Document.${outputType}`,
"url": link
}
- En el parámetro accept especificamos que queremos recibir una respuesta en formato JSON.
- El parámetro async indica que la solicitud es asíncrona.
- El parámetro fileType especifica el tipo del archivo original que vamos a convertir.
- El parámetro key representa el identificador UID del documento actual.
- El parámetro outputType indica el formato del documento convertido.
- El parámetro title contiene el nombre del documento convertido.
- El parámetro url incluye un enlace al archivo que queremos convertir.
Los valores de los parámetros fileType, otputType y url se obtienen de la parte cliente de nuestra aplicación y se almacenan en las variables. El valor del parámetro key será generado aleatoriamente y almacenado en la variable también.
Preparación del proyecto
Después de instalar los paquetes necesarios, vamos al archivo app.js y los inicializamos junto con el bodyParser para procesar los datos de la solicitud post. También configuramos una carpeta pública y un motor de vistas:
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');
A continuación, añadimos rutas. Nuestra aplicación incluirá una ruta get y una ruta post. Nos permitirán obtener los datos de entrada y pasarlos a la solicitud post al servidor de documentos ONLYOFFICE:
app.get ('/', function (reg, response){
}
app.post ('/converter', function(req, response){
}
Del lado del cliente
Ahora vamos a echar un vistazo a la parte del cliente de nuestro convertidor. Ahí es donde introduciremos todos los datos necesarios:
El lado del cliente incluye dos páginas EJS:
- homepage.ejs – nos permite obtener todos los valores necesarios para la solicitud post.
- converter.ejs – nos permite descargar el archivo convertido.
Vamos a echar un vistazo más de cerca a la homepage.ejs. Aquí creamos un formulario que envía datos a la ruta post. En primer lugar, obtenemos una URL al archivo original. La almacenaremos en la variable link del lado del servidor:
<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()">
A continuación, elegimos un tipo del archivo original en el cuadro combinado. Más tarde, obtendremos este valor y lo almacenaremos en 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>
A continuación, elegimos el tipo del archivo deseado. Este valor se almacenará en la variable outputType del lado del servidor:
<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>
Y utilizamos un botón para enviar todos los datos a la ruta post del convertidor:
<div class="button">
<button type="submit" id="download" disabled="true" class="btn btn-lg btn-primary btn-block">Convert</button>
</div>
</form>
Creación de un convertidor
Los datos obtenidos serán analizados en el lado del servidor de nuestra aplicación. Así que ahora, vamos a ir al archivo app.js y obtenerlo:
app.post ('/converter', function(req, response){
let link = req.body.link;
let outputType = req.body.outputType;
let fileType = req.body.inputType;
});
Ahora vamos a echar un vistazo a nuestro segundo cuadro combinado que envía el valor outputType a la ruta 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 se incluye en la solicitud post al servidor. Especifica el formato del archivo convertido. Vamos a examinar el código JavaScript que nos permite interactuar con los elementos de la página e incorporar una lista dinámica a nuestra interfaz de usuario.
El servicio de conversión de documentos es una herramienta muy potente, y es capaz de convertir varios tipos de archivos. Así que nuestro objetivo es utilizar una lista dinámica que nos permita seleccionar un formato para el archivo convertido. Esta lista mostrará todas las opciones disponibles para el tipo concreto del archivo original.
Para ello, creamos un archivo JSON que almacena los valores de acuerdo con cada tipo particular:
¡Ojo! Para fines de demostración, hemos incluido sólo los formatos OOXML más comunes. Para conocer todas las opciones de conversión soportadas, visita nuestra página de documentación.
A continuación añadimos una función que generará esta lista dinámica:
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;
});
};
};
En primer lugar, esta función obtiene el valor del cuadro combinado inputType, donde seleccionamos el formato del archivo original. Lo asignamos a la variable type para usar este valor más adelante. Luego hacemos una solicitud AJAX para cargar los datos JSON. Después, utilizamos el valor de la variable type como índice e procesamos una iteración a través de los datos cargados para insertar sus valores en las opciones de la lista desplegable.
Ahora, cada vez que seleccionamos el tipo del archivo original, el script se ejecuta y nos muestra las opciones de conversión disponibles de acuerdo con el formato del archivo original.
Y cuando tengamos todos los datos necesarios, los enviamos a la ruta del convertidor pulsando el botón Convertir.
Pero eso no es todo. Para que nuestra aplicación sea más interactiva, añadiremos funciones que activarán los elementos cuadro combinado y botón en la secuencia correcta:
function activateBox() {
$("#inputType").prop('disabled', false)
};
function activateButton() {
$("#download").prop('disabled', false)
$("#outputTypeForm").hide();
};
El código JavaScript completo es el siguiente:
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();
};
}
Vamos a ver lo que ocurre en el lado del servidor:
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
}))
});
En la ruta del convertidor, formamos nuestra solicitud post al Servidor de Documentos ONLYOFFICE y la almacenamos en la variable payload. Usamos las variables fileType, outputType, y link que almacenan los datos que obtuvimos. Sin embargo, también tenemos la variable key que contiene el identificador único del documento actual. Así que añadimos una pequeña función arriba para 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;
};
Ahora que tenemos todos los valores necesarios para nuestra solicitud, utilizamos jwt.sign para envolverlos en un token:
let token = jwt.sign(payload, secret, options);
El método jwt.sign recibe tres parámetros:
- Payload que incluye todos los parámetros necesarios para el éxito de la conversión.
- Header que contiene información sobre el algoritmo de cifrado y el plazo de expiración. Envolvemos estos parámetros en la variable options.
- Secret que representa una clave secreta generada por el Servidor de Documentos ONLYOFFICE. Este secreto se puede encontrar en el archivo local.json, o ejecutando el siguiente comando en el terminal:
sudo docker exec <dockerID> /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string'
Después de firmar el token, usamos una solicitud axios post para enviarlo al servidor. Luego renderizamos la página converter.ejs que recibe la respuesta del Servidor de Documentos ONLYOFFICE:
axios.post(
'http://127.0.0.1:83/ConvertService.ashx',
{
"token": token
})
.then((res) => response.render('converter.ejs', {
link: res.data.fileUrl
}))Este es un ejemplo de la respuesta en formato JSON:
{ "endConvert": true, "fileType": "docx", "fileUrl": "https://documentserver/url-to-converted-document.pdf", "percent": 100 }
Lo que necesitamos aquí es el elemento fileUrl. Es un enlace al archivo convertido. Así que lo accedemos y lo enviamos a la página converter.ejs:
.then((res) => response.render('converter.ejs', {
link: res.data.fileUrl
}))
});
En esa página, creamos dos botones. El botón Volver atrás nos devuelve a la página homepage.ejs y el botón Descargar abre el enlace que enviamos a la página y descarga el archivo convertido:
¡Ojo! Para obtener más información sobre JWT, visita nuestra página de documentación.
Todo el código del lado del servidor es el siguiente:
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'));
Y ahora vamos a ejecutar nuestro convertidor y ver cómo funciona:
Las soluciones de ONLYOFFICE son extremadamente multifuncionales. Proporcionan a los usuarios y desarrolladores una experiencia única y les permiten manipular documentos OOXML de varias maneras. Esperamos que la información mencionada sea útil y que la apliques en tus futuros proyectos. No dudes en hacernos preguntas o compartir tus ideas con nosotros. Estamos abiertos a sugerencias y a la cooperación. Te deseamos mucha suerte en tus exploraciones.
Crea tu cuenta gratuita de ONLYOFFICE
Visualiza, edita y colabora en documentos, hojas, diapositivas, formularios y archivos PDF en línea.
