Exibir código-fonte para 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 é criar um diretório virtual no IIS especificamente para armazenar os arquivos que serão disponibilizados, 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 para 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 [http://www.w3schools.com/tags/tag_a.asp <a>]  com a URL do arquivo, e adicionalmente inserir o atributo HTML5 [http://www.w3schools.com/tags/att_a_download.asp 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 '''[[Funções Javascript: openWindow|openWindow]]''', que está disponível em todas as páginas do portal.

Veja um exemplo abaixo:

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

O resultado da coluna link_verimagem, seria este:

 <a href="#" onlick="openWindow('../../arquivos/imagem.jpg', 600, 400, 'Título da Janela', null, 'modal')"> 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