Introdução
Os documentos PDF (Portable Document Format), e as apresentações eletrônicas(Documentos gerados pelo OpenOffice Impress e MicroSoft PowerPoint) são documentos em formato digital que podem ser incorporados em paginas que comportam a codificação HTML, e isto inclui uma gama de variações, como JSP, PHP, Servlets, e por aí a fora.Exemplo de documentos incorporados: Apresentação eletrônica:
http://brito.blog.incolume.com.br/2011/06/pesca.html PDF:
http://brito.blog.incolume.com.br/2011/10/varnish.html
como fazer
Para incorporar o documento, acrescenta-se a tag iframe, que cria uma área subalterna na codificação HTML, exemplo: <iframe frameborder="0" src="caminhoDocumento" style="height: 700px; width: 510px;"> <p>&amp;lt;br /&amp;gt; </p></iframe>
- O
frameborder="0"
, configura a não apresentação de borda; - O
src="caminhoDocumento"
, configura o caminho onde será encontrado o documento, se o documento estiver no mesmo servidor, o caminhoDocumento, será o path do arquivo, que pode ser relativo ou absoluto, como anexos/documento.pdf; ou se o documento estiver na web, será a url do arquivo; - O
style="height: 700px; width: 510px;"
, configura as dimensões da subjanela iframe no estilo css, que neste caso é 700 pixels de altura e 510 pixels de largura;
O modelo acima cria uma subjanela em formato retrato, para configuração em formato paisagem, pode utilizar-se do seguinte código: <iframe width="100%" height="500px" frameborder="0" src="caminhoDocumento"></iframe>
Observe que este segundo modelo, as dimensões não foram configuradas por estilo CSS, e apenas foi reduzido a altura da apresentação de 700px para 500px (
height="500px"
), e fixado a largura em 100%(width="100%"
) da área disponível.
Outra alternativa é utilizar a API do Google para exibir os teus Documentos Eletrônicos, a qual traz um Gadget com diversos recursos, como paginação, controle de zoom e abrir em nova Janela. <iframe style="WIDTH: 100%; HEIGHT: 700px" src="http://docs.google.com/gview?url=caminhoDocumento&embedded=true" frameBorder=0> </iframe>
- Note que em
src="http://docs.google.com/gview?url=caminhoDocumento&embedded=true"
, possui a URI da API do Google, que permite agregar o Gadget, em qualquer página HTML;
Comentários