Injetar PDF numa Página HTML

O PDF é um dos formatos mais utilizados na web atualmente. Todos os dias, pessoas de todo o mundo transferem ficheiros PDF da internet, enviam documentos PDF por e-mail e simplesmente leem livros PDF nos seus dispositivos. No entanto, não é assim tão fácil se quiser exibir algum ficheiro PDF no seu site como parte da página web. Neste artigo, vamos dar uma vista de olhos às formas possíveis de injetar PDF numa página HTML, abordando as vantagens e desvantagens de cada método.

Existem três opções principais para injetar um PDF numa página HTML:

• Usar as tags HTML iframe, embed e object
• Usar serviços externos, como o Slideshare
• Usar bibliotecas JS, como o pdf.js da Mozilla

Usar as tags <iframe>, <embed> e <object>

Todas estas tags são elementos inline cujo conteúdo pode ser obtido a partir de um ficheiro externo, incluindo PDF. Esta é a opção mais fácil e mais básica para injetar um PDF numa página HTML. Tudo o que é necessário é adicionar a tag correspondente ao markup da página, definindo o atributo src com uma ligação válida para o documento que queremos exibir. Também podemos ajustar a largura e a altura do elemento, quer especificando os atributos HTML correspondentes, quer com estilos CSS personalizados.

<iframe src="http://scalified.com/valid-document-url.pdf" width="100%" height="100%"></iframe>

<embed src="http://scalified.com/valid-document-url.pdf" width="100%"
 height="100%"></embed>

<object src="http://scalified.com/valid-document-url.pdf" width="100%" height="100%"></object>

Estas tags são bastante bem suportadas em todos os navegadores modernos, no entanto há um detalhe importante a considerar quando as usamos para exibir ficheiros PDF – todas assumem que o navegador sabe como renderizar o formato PDF, por exemplo, que algum plugin está instalado. Por exemplo, o Chrome tem o plugin necessário instalado de fábrica. No caso de outros navegadores/plugins, o resultado depende diretamente do plugin em questão.

Usar Serviços Externos para Alojamento de Documentos

Existem vários serviços online que lhe permitem alojar documentos e partilhá-los pela internet. Alguns deles usam iframe para incorporar documentos em páginas web. Por exemplo, um desses serviços, o Slideshare, gera código como este:

<iframe
  src="http://www.slideshare.net/slideshow/embed_code/key/fZHbg6xSXHL9Ua?startSlide=32"
  width="595"
  height="485"
  frameborder="0"
  marginwidth="0"
  marginheight="0"
  scrolling="no"
  style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"
  allowfullscreen
>
</iframe>

Como resultado, irá exibir o documento no iframe:

A vantagem deste método é a simplicidade; no entanto, a limitação é que os seus ficheiros PDF têm de ser carregados para o Slideshare e fica limitado pela sua funcionalidade. Por exemplo, se precisar de exibir ficheiros PDF dinâmicos consoante alguma condição, pode descobrir que é bastante desafiante implementar isto usando qualquer um dos serviços de terceiros.

Injetar PDF usando Bibliotecas js (ex.: pdf.js)

A última opção que vamos analisar é usar bibliotecas js especiais para renderização de PDF. Uma das mais famosas é o pdf.js da Mozilla. Eis um exemplo retirado da documentação oficial:

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<h1>PDF.js 'Hello, base64!' example</h1>

<canvas id="the-canvas"></canvas>

Neste markup HTML simples, incluímos a própria biblioteca pdf.js e criámos um elemento <canvas> onde o PDF será renderizado. Para fazer a renderização, vamos usar o pdf.js no seguinte script:

// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
// PDFJS.disableWorker = true;

// The workerSrc property shall be specified.
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

// Asynchronous download of PDF
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(
  function (pdf) {
    console.log('PDF loaded');

    // Fetch the first page
    var pageNumber = 1;
    pdf.getPage(pageNumber).then(function (page) {
      console.log('Page loaded');

      var scale = 1.5;
      var viewport = page.getViewport(scale);

      // Prepare canvas using PDF page dimensions
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      var renderTask = page.render(renderContext);
      renderTask.then(function () {
        console.log('Page rendered');
      });
    });
  },
  function (reason) {
    // PDF loading error
    console.error(reason);
  }
);

Irá exibir o seu ficheiro PDF na página.

Neste exemplo, <canvas> é usado para a renderização, no entanto existe a possibilidade de renderizar documentos em markup html regular, de modo a que estes pareçam parte do markup original da página.

Obviamente, este método é muito flexível e torna possível fazer coisas bastante sofisticadas. Por exemplo, estamos a usá-lo num dos nossos produtos de software para exibir documentos corporativos, consoante várias condições de negócio. Além disso, existem inúmeras bibliotecas wrapper para as frameworks frontend mais populares, como Angular, Vue.js, React, etc., o que constitui um bom ponto de partida para usar este método.

Por outro lado, há uma desvantagem que pode ser significativa — o suporte dos navegadores. Por exemplo, o IE9 suporta parcialmente a funcionalidade do pdf.js; o IE8 e versões inferiores não a suportam de todo. Para a lista completa de suporte de navegadores, consulte as FAQ na página do GitHub do fornecedor.

Esperamos que este artigo lhe seja útil. Tenha um ótimo dia e siga a Scalified para ler mais artigos sobre desenvolvimento frontend!