13

Estou criando uma página HTML e gostaria de saber se é possível exibir um arquivo PDF no corpo da página, de forma que ele possa ser visualizado sem ter que abrir o arquivo ou fazer download.

Ou terei que salvar o PDF como uma imagem e exibi-lo na página?

Se possível, gostaria de uma sugestão de solução que funcione em qualquer browser

4
  • Visualizar em uma pagina html ? você pode colocar dentro de um <iframe></iframe> mas se tiver falando só de visualizar o pdf em um navegador use o firefox ele tem suporte nativo que permite voce abrir pdf no navegador... Commented 19/01/2015 às 15:34
  • estou a criar uma pagina HTML e queria saber se é possivel eu colocar um PDF a ser visualizado na pagina. Se ter de abrir e sem fazer download. Tem e de funcionar em qualquer browser
    – ChrisAdler
    Commented 19/01/2015 às 15:37
  • entendi, da uma olhadinha nesse link que ele tem a solução para você: pt.stackoverflow.com/questions/10505/… Commented 19/01/2015 às 15:38
  • 1
    Qual seria o requisito de compatibilidade de browser? Conheco o pdf.js, muito completo e é da própria mozilla. O único problema é o fato de não rodar bem em IE9 ou menor.
    – Wakim
    Commented 20/01/2015 às 1:26

3 Respostas 3

14

O uso de <iframe> traz algumas incompatibilidades, principalmente se o navegador não tiver o plugin, as vezes o arquivo faz o download do PDF ao invés de abrir ou aparecer alguma mensagem de erro. Fora que o uso de <table> pra organizar o layout não é uma boa, prefira float ou até mesmo grids (ou grids de algum "framework CSS").

Pode-se usar <object> (então se não tiver suporte para um visualizador vai emitir alguma mensagem do próprio navegador falando que não é suportado):

<object data="meuarquivo.pdf" type="application/pdf">
    <p>Seu navegador não tem um plugin pra PDF</p>
</object>

Ou usar o PDF.js (Github) que não irá precisar de plugins.

Como começar: https://mozilla.github.io/pdf.js/getting_started/

Pra facilitar pode optar pelos CDNs:

Perguntas frequentes sobre o PDF.js: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions

var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 0.8,
    canvas = document.getElementById('pdf-exemplo'),
    ctx = canvas.getContext('2d');


function renderPage(num) {
  pageRendering = true;

  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });

  document.getElementById('page_num').textContent = num;
}


function queueRenderPage(num) {
  if (pageRendering) {
    pageNumPending = num;
  } else {
    renderPage(num);
  }
}

/**
 * mostra a página anterior
 */
function onPrevPage() {
  if (pageNum <= 1) {
    return;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

/**
 * mostra a proxima página
 */
function onNextPage() {
  if (pageNum >= pdfDoc.numPages) {
    return;
  }
  pageNum++;
  queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);

/**
 * Download assincrono do PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  renderPage(pageNum);
});
#pdf-exemplo {
    border: 1px solid black;
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

<div>
  <button id="prev">Proxima página</button>
  <button id="next">Página anterior</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="pdf-exemplo"></canvas>

6
  • Tou tentando ver se o stackoverflow tem algum PDF em algum canto, daria um bom exemplo em snippet
    – Largato
    Commented 29/02/2016 às 16:07
  • @Bacco pensei nisso, mas acho que o sandbox limita em algo, depois vou editar
    – Syzoth
    Commented 29/02/2016 às 16:20
  • Eu acho que nao daria certo por causa do domínio, pensando melhor, o sandbox fica em outro, né? (depois confiro). Independente disso, entendo que sua resposta é mais adequada pra uso geral do que a aceita atualmente.
    – Largato
    Commented 29/02/2016 às 16:35
  • @Bacco não é o iframe que tem um atributo chamado sandbox e impede algumas funcionalidades, acho que só a leitura do pdf deveria estar bloqueada, talvez colocar um hello world com data uri scheme funciona. Apesar de ser um ruim site de referencia o w3schools.com/tags/att_iframe_sandbox.asp tem uma breve explicação da limitação, depois vou tentar adicionar um exemplo funcional :)
    – Syzoth
    Commented 29/02/2016 às 16:40
  • Mas nao é "pdf" que vc está lendo. Note que quem renderiza o PDF é o PDF.js, o arquivo é um mero stream de bytes. O que o sandbox vai "chiar" de cara é vc querer pegar isso de outro domínio.
    – Largato
    Commented 29/02/2016 às 17:28
9

Coloque um iframe com o link do arquivo PDF:

<iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe>

UPDATE (2 iframes):

<table cellpadding="0" cellspacing="0" align="center" width="100%" height="100%">
<tr>
<td><iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe></td>
<td><iframe src="http://devsa.info/teste.pdf" width="600" height="780" style="border: none;"></iframe></td>
</tr>
4
  • É possivel utilizar dois na mesma pagina?
    – ChrisAdler
    Commented 20/01/2015 às 12:00
  • Claro, apenas coloque outro iframe, com o caminho do outro arquivo...
    – Rene Sá
    Commented 20/01/2015 às 12:02
  • eu coloquei dois e não me aparece o segundo. Coloquei cada uma das Iframes dentro de <div> e não aparece..
    – ChrisAdler
    Commented 20/01/2015 às 12:10
  • Olhe novamente o link da minha resposta e o update da mesma. Eu apenas criei uma tabela e coloquei os iframes dentro.
    – Rene Sá
    Commented 20/01/2015 às 12:43
1

O uso de iframe pode trazer alguns resultados indesejados tais como aparecer apenas esse fragmento nos resultados de pesquisa dos buscadores. No método abaixo, o PDF é incorporado diretamente no documento. Esse método mostrou um bom funcionamento em todos os navegadores:

<embed src="http://www.meudominio.com.br//meu_documento.pdf" width="760" height="500" type='application/pdf'>

Exemplo: http://www.runtal.com.br/pg_00992.php

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .