Como incorporar um visualizador de PDF em uma página?

91

Se não me engano, o Google Docs oferece os meios para exibir um PDF que está armazenado no mesmo servidor que a página da web por meio de um <iframe>, mas preciso saber como posso fazer isso de forma compatível com vários navegadores.

Andrei Oniga
fonte

Respostas:

199

Você pode considerar o uso de PDFObject de Philip Hutchison.

Como alternativa, se estiver procurando uma solução não Javascript, você pode usar uma marcação como esta:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>
Ian Gregory
fonte
Talvez as coisas tenham mudado desde 2012, mas se eu usar essa abordagem, o PDF é baixado automaticamente pelo Chrome e aberto em um navegador externo.
Egon Willighagen
34

PDF.js é um experimento de tecnologia HTML5 que explora a construção de um renderizador Portable Document Format (PDF) fiel e eficiente sem assistência de código nativo. É conduzido pela comunidade e suportado pelo Mozilla Labs.

Você pode ver a demonstração aqui .

mutil
fonte
17

Isso pode funcionar um pouco melhor assim

<embed src= "MyHome.pdf" width= "500" height= "375">
DoesEatOats
fonte
Isso funcionou para mim. Mas também tive que adicionar atributos type="application/pdf".
Iliar Turdushev
9

Se não me engano, o OP estava perguntando (embora mais tarde tenha aceitado uma solução .js) se o servidor de exibição de PDF embutido do Google exibirá um PDF em seu próprio site.

Então, um ano e meio depois: sim, vai.

Consulte http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Além disso, consulte https://docs.google.com/viewer e insira o URL do arquivo que deseja exibir.

Edit: Relendo, OP estava pedindo soluções que não usam iframes. Não acho que isso seja possível com o visualizador do Google.

Jon
fonte
3

Certifique-se de testar qualquer solução nas diferentes preferências do Reader. Um visitante do site pode ter seu navegador configurado para abrir o PDF no Reader / Acrobat em vez do navegador, por exemplo, desativando o plug-in Acrobat no Firefox.

Não posso ter certeza dos meus resultados, porque tenho dois plug-ins Acrobat diferentes que o Firefox reconhece devido a minhas versões diferentes do Adobe Acrobat e do Adobe Reader, mas parece que você precisa pelo menos testar o que acontece se um visitante do site tem o navegador configurado para não abrir o PDF no navegador. Pode ser muito irritante quando eles olham para o que parece ser uma página da web utilizável e seu navegador os incita a abrir um arquivo PDF que eles acham que não solicitaram. Em alguns casos, o arquivo PDF é aberto espontaneamente no Adobe Reader, não no navegador, e em outros casos, o navegador exibe uma caixa de diálogo dizendo que o arquivo não existe.

Encontrei incompatibilidades com iframe e object, problemas diferentes para códigos diferentes.

Isso é para código HTML simples. Não experimentei os frameworks sugeridos.

Charles Belov
fonte
1

Eu realmente optaria pelo FlowPaper, especialmente seu novo modo Elements, que pode ser encontrado aqui: https://flowpaper.com/demo/

Ele nivela os PDFs significativamente, ao mesmo tempo que mantém o texto nítido, o que significa que carregará muito mais rápido em dispositivos móveis

Robby
fonte
1

usando o bootstrap, você pode ter um primeiro arquivo incorporado responsivo e móvel.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
Sina Riyazi
fonte
0

pdf2htmlEX da coolwanglu é provavelmente a melhor solução que existe para converter um arquivo pdf em html. Você pode fazer uma conversão simples e incorporar a página html como um iframe ou algo semelhante.

Dreizeiler
fonte