É espantoso quanta informação temos hoje armazenada em formato PDF. De acordo com a associação PDF, são criados aproximadamente 2,5 triliões de PDFs por ano, perfazendo 6% da web. Contudo, como desenvolvedor web, os PDFs num sítio web podem apresentar uma variedade de desafios:
- As experiências de visualização variam muito entre diferentes utilizadores e dispositivos porque dependem de um visualizador de PDF. Quer esteja incorporado em navegadores web ou em bibliotecas online gratuitas, alguns espectadores são melhores do que outros. Adobe Acrobat Reader é geralmente o padrão universal para visualizar correctamente os PDFs.
- Torna-se difícil para mim poder incorporar os PDFs no resto do meu sítio web. A maior parte das vezes, os PDFs incitariam os utilizadores a descarregar PDFs nos seus dispositivos.
- Converter PDFs para HTML é difícil e pouco fiável. Se eu quiser apresentar conteúdo dentro de uma página web que esteja em formato PDF, muitas vezes posso aplanar para PDF para facilitar a incorporação.
- Não tenho visibilidade sobre como o meu visitante está a visualizar esses PDFs. Isto significa que não faço ideia se alguém está a ler certas páginas, quanto tempo passa nessas páginas, etc.
Felizmente, Adobe lançou Adobe PDF Embed API (PDF Embed), uma forma fácil de incorporar um PDF directamente no seu sítio web com apenas um pequeno fragmento de código. É inteiramente livre de usar e torna o lado do cliente dentro da sua aplicação web. Não tem de aprender uma biblioteca sofisticada de PDF, e é super fácil de fazer. Nenhum dado é apresentado em servidores Adobe. De facto, pode até aprender a jogar com ela aqui.
NOTHING! Isso é o que há de melhor nisto. Não precisa de mais nada além de uma página web para usar o PDF Embed.
Utilizar Site de Demonstração para experimentar o PDF Embed API
A forma mais fácil de se familiarizar com o PDF Embed é realmente experimentá-lo no Site de Demonstração. É um recurso fácil de começar porque permite:
- Ver em tempo real os diferentes modos de incorporação disponíveis para os seus PDFs.
- Personalizar quais as características que deseja como parte do visualizador, tais como ferramentas de anotação, descarregar PDF, imprimir PDF, controlos de página, etc.
- Gera código para colar directamente no seu website.
Conseguir o seu ID de Cliente
Se quiser experimentar o PDF Incorporado no seu próprio código, funciona sem um ID de Cliente quando o está a utilizar localmente. No entanto, se quiser incorporá-lo realmente no seu website, terá de obter o ID de Cliente. Obtenha aqui o seu ID de Cliente.
>/div>>>>div>>>>figcaption>Configurar o seu domínio de aplicação é importante. Quando o PDF Embed for carregado, verificará se o Visualizador está a ser carregado a partir deste domínio.
p>Aqui estão algumas dicas importantes:
- Para criar um ID de Cliente, terá de ter um ID da Adobe. Se não tiver um, pode inscrever-se aqui usando um endereço de e-mail, Google, Facebook, ou Apple ID.
- Necessita de definir o seu domínio de aplicação para que isto funcione.
Após criar o seu ID de Cliente, vai querer copiá-lo e usá-lo no seu código.
>/div>
NOTE: Enquanto pode editar as suas configurações no Adobe.io Console, vai querer ir para o link para criar a sua chave. Se criar a sua chave a partir da Consola Adobe.io, esta não lhe dará a opção de definir o seu domínio.
Seleccionar o seu modo de incorporação
Uma das coisas poderosas sobre o PDF Embed é que tem diferentes modos de incorporação à sua escolha:
Janela cheia
Full Window permite-lhe ter uma experiência de visualização semelhante à do Adobe Acrobat Reader no seu computador e incorporá-la no seu sítio web. Acho este ideal ao visualizar documentos de formato longo, ou se quiser ter uma experiência familiar de visualização de PDF na minha IU.
Contentor de tamanho
Contentores de tamanho são óptimos para conteúdos como apresentações em PowerPoint que foram convertidas para PDF, ou uma série de instruções. Acho isto menos ideal de uma experiência se se estiver a incorporar PDFs de formato longo.
In-Line
/div>>>>figcaption>In-O modo de linha permite-lhe inserir um PDF em linha dentro da sua página web.
In-Line view pode ajudar os designers a incorporar os seus desenhos numa página web sem ter de a reconstruir ou achatá-la numa imagem. A visualização em linha pega no seu PDF e torna-o em linha como HTML. Gosto deste modo de incorporação para quando quiser mostrar conteúdos como infográficos que desenhou no Illustrator, InDesign, etc. e exportou para PDF, mas quero que ainda seja pesquisável e que tenha hiperligações sem ter de se preocupar em re-desenhar para a web.
Lightbox
A Lightbox abre o visualizador de PDFs no topo da página web para fornecer uma visão mais focalizada. Este modo é ideal quando tem ligações a ficheiros PDF em todo o seu sítio web mas pretende controlar a experiência de visualização, recolher análises e desencadear eventos com base na forma como o seu público está a interagir com os ficheiros PDF que publicou.
Gerar o seu código
Quando estiver a utilizar o Site Demo e clicar em Gerar código, este parecerá algo parecido com isto:
Para começar, vai querer substituir os seguintes itens:
- Replace <YOUR_CLIENT_ID> com o ID do Cliente que gerou.
li> Substitua o parâmetro url pelo URL do seu PDF que pretende visualizar.
NOTE: Uma vez que o PDF Embed torna o lado cliente no browser, irá honrar qualquer conjunto de restrições de domínio cruzado, pelo que poderá ter de garantir que os seus cabeçalhos permitem ligações de domínio cruzado. li>Mude o nome do ficheiro para o nome do seu documento. Isto aparecerá no visualizador.
Após fazer isso, poderá inserir o seu PDF no seu website. É assim tão fácil!
Exemplos que utilizam hoje os Serviços SDK
Exemplos que já utilizam hoje os Serviços SDK:
- PDF Viewer Component for AEM
- PDF like a boss
- Microsoft SharePoint Plugin
- Adobe Acrobat for G Suite
Conclusion
PDF Embed permite realmente uma grande flexibilidade para aproveitar os PDFs com os seus websites. Há muito mais que pode fazer com ele da Analytics, Event Listeners, e muito mais sobre o qual pode aprender mais nesta documentação.
Queremos ouvir de si
Após dar uma vista de olhos ao PDF Embed, adoraríamos ouvir os seus pensamentos! Participe no Adobe Document Cloud Forum para dar o seu feedback, ou responda a este artigo!
UPDATE (07/07/2020): Actualizado para adicionar novo modo de incorporação Lightbox e adicionar nova imagem de cabeçalho.
UPDATE (31/07/2020): Actualizado para reflectir a nova imagem de marca.