Injeção de HTML: Download e Visualização de Arquivos

Este artigo tem como objetivo ensinar todos os passos para a criação de links personalizados na Grid para Download e Visualização de Arquivos, utilizando uma técnica que chamamos de Injeção de HTML.

A premissa dessa implementação é tornar os arquivos disponíveis na internet, e montar LINKs no SELECT através da concatenação de strings para chamar estes arquivos.

Publicação dos Arquivos

Para disponibilizar os arquivos na Web, eles precisam de uma URL. Para isso, precisam estar publicados no IIS do seu servidor, ou em algum serviço de hospedagem contratado. O importante é saber qual é a URL do arquivo, pois ela será necessária nos próximos passos.

Se o arquivo não está hospedado no mesmo servidor que o LATROMI WecDB, será necessário usar o endereço absoluto (ex.: http://meudominio.com/arquivos/imagem.jpg). Caso contrário, é possível utilizar o endereço relativo dos arquivos (ex.: ../../arquivos/imagem.jpg), o que é melhor, pois caso o endereço seja alterado, a referência ao arquivo não será perdida.

Considerando que os arquivos serão hospedados no mesmo servidor que o LATROMI WecDB, pode-se imaginar a seguinte estrutura de diretórios no IIS:

c:\inetpub\wwwroot\LATROMI\WecDB
c:\inetpub\wwwroot\arquivos

Nesta situação, o exemplo de endereço relativo citado anteriormente funcionaria perfeitamente.

Abaixo, um exemplo da criação de links, utilizando o endereço relativo e absoluto do arquivo:

<a href="../../arquivos/imagem.jpg">Abrir Imagem</a>
<a href="http://meudominio.com/arquivos/imagem.jpg">Abrir Imagem</a>

Importante: Os arquivos não devem ser alocados dentro da pasta do portal LATROMI WecDB (ex.: c:\inetpub\wwwroot\LATROMI\WecDB\Meus_Arquivos), pois serão removidos quando o sistema for atualizado.

Download de Arquivos

Para fazer o download do arquivo, será necessário criar um elemento <a> com a URL do arquivo, e adicionalmente inserir o atributo HTML5 download, que forçará o download do arquivo. Se este atributo não for especificado, e o tipo do arquivo for suportado pelo navegador (ex.: pdf, jpg, png, xml...), ele será aberto como uma página qualquer ao invés de ser baixado. Porém, este atributo não é suportado pelo Internet Explorer e pelo Safari.

Abaixo, um exemplo de Query que gera o link para download:

  SELECT 
     tabela.campo1,
     tabela.campo2,
     tabela.campo3,
     '<a href="../../arquivos/imagem.jpg" download> Download da Imagem </a>' AS link_download
     FROM tabela
  WHERE .....

Agora, deixando o exemplo um pouco mais dinâmico, suponhamos que o nome da imagem esteja salvo no banco de dados:

  SELECT 
     tabela.campo1,
     tabela.campo2,
     tabela.campo3,
     '<a href="../../arquivos/' || tabela.nomearquivo || ' download> Download da Imagem </a>' AS link_download
     FROM tabela
  WHERE .....

Visualização de Arquivos

Para visualizar o arquivo em uma Janela dentro da página, como acontece com os links para Queries, Mapas, e etc, será necessário fazer a chamada de uma função Javascript no Link. Trata-se da função openWindow, que está disponível em todas as páginas do portal.

Veja um exemplo abaixo:

  SELECT 
     tabela.campo1,
     tabela.campo2,
     tabela.campo3,
     '<a href="#" onclick="openWindow(''../../arquivos/' || tabela.nomearquivo || ''', 600, 400, ''Visualização de Imagem'', null, ''modal,showContentDuringLoad'')"> Ver Imagem </a>' AS link_verimagem
     FROM tabela
  WHERE .....

O resultado da coluna link_verimagem, seria este:

<a href="#" onclick="openWindow('../../arquivos/imagem.jpg', 600, 400, 'Título da Janela', null, 'modal,showContentDuringLoad')"> Ver Imagem </a>

Onde temos respectivamente os seguintes parâmetros:

• Endereço do arquivo: ../../arquivos/imagem.jpg
• Largura da Janela: 600 (pixels)
• Largura da Janela: 800 (pixels)
• Título da Janela: Visualização de Imagem
• Comportamento: null (não precisa ser especificado)
• Opções: modal