A conversão de documentos é um recurso muito popular e valioso que nos ajuda a operar com vários tipos de documentos. Os produtos ONLYOFFICE podem facilmente converter documentos em uma ampla variedade de formatos. Esta postagem de blog mostrará como criar um conversor online executado na API de conversão do ONLYOFFICE.
Sobre a API de conversão do ONLYOFFICE
O serviço de Conversão de Documentos permite converter todos os tipos de documentos do Office: textos, planilhas, slides, formulários, PDFs e eBooks. Ele facilita a criação de PDFs a partir de documentos e planilhas, convertendo livros didáticos em eBooks, apresentações em arquivos de imagem e muito mais. O ONLYOFFICE suporta mais de 50 tipos de documentos diferentes.
Como funciona
Nossa API de conversão opera por meio do serviço de conversão de documentos, que funciona como parte do servidor de documentos do ONLYOFFICE e nos permite converter vários arquivos de documentos nos formatos apropriados.
A conversão é realizada em várias etapas:
- O usuário seleciona um arquivo que deve ser carregado no gerenciador de documentos.
- O gerenciador de documentos envia o arquivo selecionado para o serviço de armazenamento de documentos.
- O serviço de armazenamento de documentos envia o arquivo carregado para o serviço de conversão de documentos usando o conversion API.
- O serviço de conversão de documentos converte o arquivo selecionado para o formato de destino.
- O serviço de armazenamento de documentos baixa o arquivo do documento convertido.
O gerenciador de documentos e os serviços de armazenamento de documentos são ferramentas do lado do cliente e do servidor que facilitam a seleção e o armazenamento de um documento para posterior conversão. No entanto, nosso aplicativo da Web lidará com essas tarefas, pois estamos criando um conversor personalizado.
Pré-requisitos
Nosso conversor será baseado em NodeJS. Portanto, para este projeto, precisaremos do seguinte:
- ONLYOFFICE Document Server
- Aplicativo NodeJS com os seguintes pacotes instalados:
– Express
– Axios
– Jsonwebtoken
Usaremos o pacote Axios para enviar uma solicitação de postagem ao servidor de documentos do ONLYOFFICE e o pacote Jsonwebtoken para assinar um token JWT. A partir da versão 7.2, a autenticação JWT é habilitada por padrão.
Como alternativa, há uma opção para executar a imagem do ONLYOFFICE Document Server com a autenticação JWT desativada. Para fazer isso, execute o seguinte comando no terminal:
|
1 |
sudo docker run -i -t -d -p 80:80 -e JWT_ENABLED=false onlyoffice/documentserver |
A solicitação de postagem que nosso conversor está enviando para o ONLYOFFICE Document Server é a seguinte:
|
1 2 3 4 5 6 7 8 |
{ "async": true, "filetype": fileType, "key": key, "outputtype": outputType, "title": `Converted Document.${outputType}`, "url": link } |
- No parâmetro aceitar, especificamos que queremos receber uma resposta no formato JSON.
- O parâmetro async indica que a solicitação é assíncrona.
- O parâmetro fileType especifica o tipo do arquivo original que vamos converter.
- O parâmetro chave representa o identificador UID do documento atual.
- O parâmetro outputType indica o formato do documento convertido.
- O parâmetro do título contém o nome do documento convertido.
- O parâmetro url inclui um link para o arquivo que queremos converter.
Os valores dos parâmetros fileType, otputType e url são obtidos do lado do cliente de nosso aplicativo e armazenados nas variáveis. O valor do parâmetro chave será gerado aleatoriamente e armazenado na variável também.
Projeto configurado
Depois de instalar os pacotes necessários, vamos ao arquivo app.js e inicializamos junto com o bodyParser para processar os dados da pós-solicitação. Também configuramos uma pasta pública e um mecanismo de exibição:
|
1 2 3 4 5 6 7 8 9 10 |
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'); |
Em seguida, adicionamos rotas. Nosso aplicativo incluirá uma rota get e uma rota post. Eles nos permitirão buscar os dados de entrada e passá-los para a solicitação de postagem para o ONLYOFFICE Document Server:
|
1 2 3 4 5 |
app.get ('/', function (reg, response){ } app.post ('/converter', function(req, response){ } |
Do lado do cliente
Agora vamos fazer um pequeno desvio e olhar para o lado do cliente do nosso conversor. É aí que vamos inserir todos os dados necessários:
O lado do cliente inclui duas páginas EJS::
- homepage.ejs – nos permite buscar todos os valores necessários para o post request.
- converter.ejs – nos permite baixar o arquivo convertido.
Vamos dar uma olhada mais de perto no homepage.ejs. Aqui criamos um formulário que envia os dados para o post route. Primeiro, obtemos um URL para o arquivo original. Vamos armazená-lo na variável de link no lado do servidor:
|
1 2 |
<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()"> |
Em seguida, escolhemos um tipo de arquivo original na caixa de combinação. Posteriormente, iremos buscar este valor e armazená-lo na variável inputType:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Em seguida, escolhemos o tipo de arquivo desejado. Este valor será armazenado na variável outputType no lado do servidor:
|
1 2 3 |
<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 usamos um botão para enviar todos os dados para a rota pós conversor:
|
1 2 3 4 |
<div class="button"> <button type="submit" id="download" disabled="true" class="btn btn-lg btn-primary btn-block">Convert</button> </div> </form> |
Construindo um conversor
Os dados buscados serão analisados no lado do servidor de nosso aplicativo. Então agora, vamos ao arquivo app.js e obtemos:
|
1 2 3 4 5 6 |
app.post ('/converter', function(req, response){ let link = req.body.link; let outputType = req.body.outputType; let fileType = req.body.inputType; }); |
Agora vamos dar uma olhada em nossa segunda caixa de combinação que envia o valor outputType para a rota post:
|
1 2 3 |
<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> |
A variável outputType é incluída na solicitação post para o servidor. Ele especifica o formato do arquivo convertido. Vamos examinar o código JavaScript que nos permite interagir com os elementos da página e incorporar uma lista dinâmica em nossa IU.
O serviço de conversão de documentos é uma ferramenta muito poderosa, capaz de converter diversos tipos de arquivos. Portanto, nosso objetivo é utilizar uma lista dinâmica que nos permita selecionar um formato para o arquivo convertido. Esta lista exibirá todas as opções disponíveis para o tipo específico de arquivo original.
Para isso, criamos um arquivo JSON que armazena os valores de acordo com cada tipo em particular:
Observação! Para fins de demonstração, incluímos apenas os formatos ooXML mais comuns. Para saber todas as opções de conversão suportadas, visite nossa página de documentação.
Em seguida adicionamos uma função que vai gerar essa lista dinâmica:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; }); }; }; |
Primeiramente, esta função obtém o valor da caixa de combinação inputType, onde selecionamos o formato do arquivo original. Nós o atribuímos à variável de tipo para usar esse valor na linha. Em seguida, fazemos uma solicitação AJAX para carregar os dados JSON. Depois disso, usamos o valor da variável de tipo como um índice e iteramos pelos dados carregados para inserir seus valores nas opções da lista suspensa.
Agora, toda vez que selecionamos o tipo do arquivo original, o script é executado e nos mostra as opções de conversão disponíveis de acordo com o formato do arquivo original.
E depois de termos todos os dados necessários, enviamos para a rota do conversor clicando no botão Converter.
Mas não é isso. Para tornar nosso aplicativo mais interativo, adicionaremos funções que ativarão a caixa de combinação e os elementos do botão na sequência correta:
|
1 2 3 4 5 6 7 8 |
function activateBox() { $("#inputType").prop('disabled', false) }; function activateButton() { $("#download").prop('disabled', false) $("#outputTypeForm").hide(); }; |
Todo o código JavaScript é o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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 dar uma olhada no que está acontecendo no lado do servidor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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 })) }); |
Na rota do conversor, formamos nossa solicitação de postagem para o servidor de documentos do ONLYOFFICE e a armazenamos na variável Payload. Usamos variáveis fileType, outputType e link que armazenam os dados que buscamos. No entanto, também temos a variável chave que contém o identificador exclusivo do documento atual. Então adicionamos uma pequena função acima para gerá-lo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; }; |
Agora que temos todos os valores necessários para nossa solicitação, usamos jwt.sign para envolvê-los em um token:
|
1 |
let token = jwt.sign(payload, secret, options); |
O método jwt.sign usa três parâmetros:
- Payload que inclui todos os parâmetros necessários para a conversão bem-sucedida.
- Header que contém informações sobre o algoritmo de cifragem e o prazo de expiração. Envolvemos esses parâmetros na variável de opções.
- Secret que representa uma chave secreta gerada pelo ONLYOFFICE Document Server. Este segredo pode ser encontrado no local.json file, ou executando o seguinte comando no terminal:
|
1 |
sudo docker exec <dockerID> /var/www/onlyoffice/documentserver/npm/json -f /etc/onlyoffice/documentserver/local.json 'services.CoAuthoring.secret.session.string' |
Depois de assinarmos o token, usamos uma solicitação post axios para enviá-lo ao servidor. Em seguida, renderizamos a página converter.ejs que recebe a resposta do ONLYOFFICE Document Server:
|
1 2 3 4 5 6 7 8 |
axios.post( 'http://127.0.0.1:83/ConvertService.ashx', { "token": token }) .then((res) => response.render('converter.ejs', { link: res.data.fileUrl })) |
Aqui está uma amostra da resposta no formato JSON:
|
1 |
{ "endConvert": true, "fileType": "docx", "fileUrl": "https://documentserver/url-to-converted-document.pdf", "percent": 100 } |
O que precisa aqui é o elemento fileUrl. É um link para o arquivo convertido. Então acessamos e enviamos para a página converter.ejs:
|
1 2 3 4 |
.then((res) => response.render('converter.ejs', { link: res.data.fileUrl })) }); |
Nessa página, criamos dois botões. O botão Voltar nos leva de volta à página homepage.ejs e o botão Download abre o link que enviamos para a página e baixa o arquivo convertido:
Observação! Para saber mais sobre o JWT, visite nossa página de documentação.
Todo o código do lado do servidor é o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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 agora, vamos rodar nosso conversor e ver como ele funciona!
As soluções do ONLYOFFICE são extremamente multifuncionais. Eles fornecem aos usuários e desenvolvedores uma experiência única e permitem que eles manipulem documentos ooXML de várias maneiras. Esperamos que você ache as informações mencionadas acima úteis e as aplique em seus projetos futuros. Não hesite em fazer perguntas ou compartilhar suas ideias conosco. Estamos abertos a sugestões e cooperação. Boa sorte em seus esforços exploratórios!
