Maneira recomendada de incorporar PDF em HTML?

1182

Qual é a maneira recomendada de incorporar PDF em HTML?

  • iFrame?
  • Objeto?
  • Embutir?

O que a Adobe diz a respeito disso?

No meu caso, o PDF é gerado dinamicamente, portanto, não pode ser carregado em uma solução de terceiros antes de liberá-lo.

Daniel Silveira
fonte
6
Tente pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
Tezcat
Há uma grande comparação não apenas de soluções específicas, mas também de estratégias gerais, no wiki do repositório pdf2htmlEX . Além disso, embora eu não tenha tentado, isso parece ser um garfo mantido.
ShreevatsaR

Respostas:

540

Provavelmente, a melhor abordagem é usar a biblioteca PDF.JS. É um renderizador HTML5 / JavaScript puro para documentos PDF sem plugins de terceiros.

Demonstração on-line: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

lubos hasko
fonte
12
Como observado em outra resposta, Scribd realmente usa pdf2swf para converter arquivos pdf
Peter Craig
8
Eu recomendo não usar o scribd - eu acabei de realizar um experimento em um documento específico e no firefox 4 ele exibe apenas as 3 primeiras páginas, enquanto no IE9 seu texto está incorreto - ele deslocou algumas seções da página. Então, tecnicamente falando, é um buggy. Além disso, eles esperam que você assine para imprimir ou baixar documentos! Essencialmente, eles estão pegando documentos anteriormente gratuitos e montando uma barreira de pagamento em torno deles.
frankster
9
A biblioteca PDF.js na verdade parece uma solução muito boa, embora a demonstração vinculada não a mostre incorporada em uma página (ocupa a página inteira). Mas ele usa a tela HMTL5, por isso deve ser fácil de incorporar e é rápido . No lado negativo, são necessários alguns js para usar, ao contrário de <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
LarsH
33
O pdf.js funciona mal em navegadores de tablet como o Chrome. Também acho que é muito, muito lento para documentos PDF maiores.
Rocco The Taco
10
Não acredito que isso esteja sendo recomendado. Veja a renderização da fonte na demonstração online, eles parecem irregulares e terríveis. Parece muito melhor com a renderização sub-pixel quando aberta no Adobe Reader.
speedplane
532

Isso é rápido, fácil e direto ao ponto e não requer nenhum script de terceiros:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

ATUALIZAÇÃO (1/2018):

O navegador Chrome no Android não oferece mais suporte à incorporação de PDF. Você pode contornar isso usando o visualizador de PDF do Google Drive

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
Batfan
fonte
30
Melhor usar uma tag <object> para poder incluir um fallback.
quer
1
Eu pensei que os desenvolvedores gostariam de saber que o Mac / Firefox obtém uma imagem de plugin corrompida. A página do plug-in não carregará o plug-in que ele está procurando. Alguma ideia de como contornar isso?
Shanimal 17/05
63
se você deseja obter a certeza que vai ser mostrado em vez de download automático do pdf (como aconteceu comigo) adicionar type='application/pdf'a tag embed
Hassek
32
Melhor usar a <object>tag, pois ela pode exibir conteúdo alternativo em navegadores que não podem exibir PDFs. Pode até colocar uma <embed>tag em uma <object>tag, se quiser. Ref: stackoverflow.com/questions/1244788/embed-vs-object
Raphael
1
@raphaelcm Na verdade, como eu disse antes, o simples uso da tag embed funciona em todos os principais navegadores. Mesmo IE 7 e 8.
Batfan
361

Você também pode usar o visualizador de PDF do Google para esse fim. Tanto quanto sei, não é um recurso oficial do Google (estou errado nisso?), Mas funciona muito bem e sem problemas. Você precisa fazer o upload do seu PDF em algum lugar antes e apenas usar o URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

O importante é que ele não precisa de um Flash player, usa JavaScript.

Lukasz Korzybski
fonte
29
Uma coisa que deve ser mencionada é que há um limite superior para o tamanho do PDF que pode ser exibido. Eu acho que atualmente são 10MB / 100 páginas. PS: Eu não acho que o espectador seja "não oficial"; eles ainda têm um how-to página que constrói a URL de incorporação para você: docs.google.com/viewer
SuperElectric
30
Essa opção funciona muito bem, mas você precisa tornar seus PDFs acessíveis ao público, o que para mim nem sempre é uma opção.
KoviNET 19/08/2012
4
@riot_starter esta solução não funciona mais, se você está totalmente desconectado do google, ele carrega bem, se você está totalmente conectado, carrega bem, no entanto, se você estiver no meio (o que quer que isso signifique), solicita sua senha. E no caso do iframe, ele simplesmente não carrega.
dwenaus
5
Você está autorizado a definir a privacidade de qualquer Google Docs entre public, sign-in requirede private. É definitivamente um recurso oficial, considerando que qualquer documento no Google Docs tem uma embedopção.
b1nary.atr0phy
6
Outra coisa que deve ser mencionada é o aviso "você fez muitas solicitações recentemente", que é uma limitação.
kommradHomer
116

Você tem algum controle sobre como o PDF aparece no navegador, passando algumas opções na sequência de consultas. Fiquei feliz por esse trabalho, até que percebi que não funciona no IE8. :(

Ele funciona no Chrome 9 e Firefox 3.6, mas no IE8 mostra a mensagem "Insira sua mensagem de erro aqui, se o PDF não puder ser exibido".

Ainda não testei versões mais antigas de nenhum dos navegadores acima. Mas aqui está o código que tenho de qualquer maneira, caso ajude alguém. Isso define o zoom para 85%, remove barras de rolagem, barras de ferramentas e painéis de navegação. Atualizarei minha postagem se encontrar algo que funcione também no IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
Gayle
fonte
6
Essa é a melhor solução porque está usando os recursos do navegador e não uma solução complicada de terceiros. Em todos os navegadores modernos (IE9, FF ou Chrome), o PDF deve ser bem incorporado. Desculpe pelos usuários do IE 6/7. Eles precisam atualizar. Paramos de oferecer suporte a esses navegadores há muito tempo. :(
Adrian P.
2
Não funciona na minha edição para tablet do Chrome..FYI ... pena, teria sido uma solução rápida.
Rocco The Taco
1
+1 para abordar as opções de zoom e rolagem; no entanto, isso não está funcionando na versão mais recente do Chrome (44) ... Falha ao carregar o documento PDF.
NotJay
É possível adicionar um botão Fechar? e como?
Roberto Sepúlveda Bravo
@RoccoTheTaco Seconded, não funciona no Chrome móvel no Android
Anonymous
66

Usar os dois <object>e <embed>fornecerá uma ampla variedade de compatibilidade com o navegador.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>
Suneel Kumar
fonte
4
Isso não vai funcionar em navegadores se pdf complemento não na instalação ou fora da data
Umair Hamid
Além disso, isso não será validado para aqueles que se preocupam com a validação de código.
NotJay
1
Isso funcionou muito bem para mim, enquanto o uso da embedtag por si só foi considerado unsafepelo Chrome e Firefox.
Richie Thomas
1
Por alguma razão, no Android (chrome), ele não incorpora o PDF e oferece o download. No iPhone (safari), mostra apenas a primeira página do PDF.
Ivan Rubinson 22/02
21

Converta-o em PNG via ImageMagick e exiba o PNG (rápido e sujo).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Essa é uma boa opção se você precisar de uma solução rápida, quiser evitar problemas de visualização de PDF em vários navegadores e se o PDF for apenas uma página ou duas. Obviamente, você precisa do ImageMagick instalado (que, por sua vez, precisa do Ghostscript) em seu servidor da Web, uma opção que pode não estar disponível em ambientes de hospedagem compartilhada. Há também um plug-in PHP (chamado imagick) que funciona assim, mas possui seus próprios requisitos especiais.

Dan Mantyla
fonte
Ou converta a imagem em PNG usando um aplicativo, como Visualizar no Mac.
Garrett
2
mas você pode fazer isso programaticamente?
Dan Mantyla 21/09/12
e se o documento tiver mais de 1 página? Eu acho que você só vai mostrar a primeira página então #
1110 seb
@seb já faz um tempo, mas consegui usá-lo em PDFs de 2 ou 3 páginas. Não seria sensato ir muito além disso, acho que os navegadores móveis têm dificuldade em exibir imagens como essa. Foi por isso que o chamei de método "rápido e sujo", mas acho que é bom, desde que o PDF não ultrapasse algumas páginas.
precisa saber é o seguinte
1
Se você abrir o PDF usando a biblioteca Zend, em seguida, você pode fazer um foreach($pdf->pages as $page)e criar uma imagem para cada página
99 problemas - Sintaxe não é um
19

Veja este código - Para incorporar o PDF em HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>
AM
fonte
6
Isso não parece funcionar. Eu sempre acabo com uma tela cinza em branco em vez do pdf. Mas mudar srcpara data, como na resposta de @ Gayle, funciona.
Mottie
1
Estou usando o Chrome 44 e não vai funcionar. Eu também tentei mudar os dados para src.
NotJay
1
type = "application / pdf" corrige o problema. Funciona bem em cromo.
Gavin Simpson
13

O FDView combina PDF2SWF (que é baseado em xpdf ) com um visualizador SWF, para que você possa converter e incorporar documentos PDF em tempo real no servidor.

O xpdf não é um conversor de PDF perfeito. Se você precisar de melhores resultados, o Ghostview poderá converter documentos PDF em outros formatos para os quais você poderá criar mais facilmente um visualizador em Flash.

Mas para documentos PDF simples, o FDView deve funcionar razoavelmente bem.

Adam Davis
fonte
O FDView está disponível em outro lugar? O code4net.com parece ter desaparecido.
Michael Myers
@ Michael Não que eu possa encontrar facilmente. Deixarei essa resposta com a chance de alguém re-hospedar o fdview em outro lugar.
Adam Davis
12

Nosso problema é que, por razões legais , não temos permissão para armazenar temporariamente um PDF no disco rígido . Além disso, a página inteira não deve ser recarregada ao exibir um PDF como visualização no navegador.

Primeiro, tentamos o PDF.jS. Ele trabalhou com o Base64 no visualizador para Firefox e Chrome. No entanto, era inaceitavelmente lento para o nosso PDF. O IE / Edge não funcionou.

Portanto, tentamos com uma string Base64 em uma tag de objeto HTML. Isso novamente não funcionou para o IE / Edge (talvez o mesmo problema que com o PDF.js). No Chrome / Firefox / Safari novamente, não há problema. Por isso, escolhemos uma solução híbrida. IE / Edge, usamos um IFrame e, para todos os outros navegadores, a tag de objeto.

É claro que a solução IFrame também funcionaria para o Chrome e outras empresas. O motivo pelo qual não usamos essa solução para o Chrome é que, embora o PDF seja exibido corretamente, o Chrome faz uma nova solicitação ao servidor assim que você clica em "baixar" na visualização . O pdfHelperTransferData de campo oculto necessário (para enviar nossos dados de formulário necessários para a geração de PDF) não é mais definido porque o PDF é exibido em um IFrame. Para esse recurso / bug, consulteO Chrome envia duas solicitações ao baixar um PDF (e cancela uma delas) .

Agora, os filhos problemáticos IE9 e IE10 permanecem. Para isso, desistimos de uma solução de visualização e simplesmente enviamos o documento clicando no botão de visualização como um download para o usuário (em vez da visualização). Tentamos muito, mas mesmo se tivéssemos encontrado uma solução, o esforço extra para essa pequena parte dos usuários não teria valido a pena. Você pode encontrar nossa solução para o download aqui: Faça o download do PDF sem atualizar com o IFrame .

Nosso Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Nosso HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Para verificar o tipo de navegador do IE / Edge, consulte aqui: Como posso detectar o Internet Explorer (IE) e o Microsoft Edge usando JavaScript? Espero que essas descobertas salvem o tempo de outra pessoa.

George Maharis
fonte
Sinto muito, mas não entendo, que tipo de valor a variável "transferData" possui?
Kate
1
Olá @Kate, No nosso caso, geramos o PDF com base nas informações de um usuário em nosso formulário da web. "transferData" contém os dados que são enviados como JSON para a função de geração de PDF na API da web. Adicionei uma linha a mais de código para esclarecimentos.
George Maharis
10

Você pode usar a localização relativa do pdf salvo desta forma:

Exemplo 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Exemplo2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

Ahmedakhtar11
fonte
10
  1. Crie um contêiner para armazenar seu PDF

    <div id="example1"></div>
  2. Informe ao PDFObject qual PDF incorporar e onde incorporá-lo

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
  3. Opcionalmente, você pode usar CSS para especificar o estilo visual, incluindo dimensões, bordas, margens, etc.

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>

fonte: https://pdfobject.com/

Disse Bouigherdaine
fonte
Essa foi uma solução muito boa e funcionou bem em conjunto com o estilo de inicialização. Tudo foi além de outros elementos de inicialização.
netfed 5/02/19
Você tentou com o arquivo blob? Eu usei isso com o pdf.output('bloburl')lib jspdf, mas parece que não está funcionando no IE11.
Hoang Tran Filho
8

O Scribd não exige mais que você hospede seus documentos no servidor deles. Se você criar uma conta com eles, obterá um ID de editor. São necessárias apenas algumas linhas de código JavaScript para carregar arquivos PDF armazenados em seu próprio servidor.

Para mais detalhes, consulte Ferramentas de Desenvolvedor .

Bjorn
fonte
1
Você poderia postar outro link mostrando como isso é feito? Não está claro no link que você postou.
SuperElectric
Parece que eles atualizaram o site e alteraram esta página. Eu acho que esta página tem o conteúdo que eu estava referindo-se no meu post original: scribd.com/developers/api?method_name=Javascript+API
Bjorn
Eu gostaria de poder gostar mais de uma vez, funciona perfeitamente. Role até a parte inferior do site e clique em API para ver exemplos.
Rocco The Taco
1
Agora, as inscrições estão fechadas para o scribd.
Lance Fisher
4
<object width="400" height="400" data="helloworld.pdf"></object>
Daryl H
fonte
4

PdfToImageServlet usando o convertcomando ImageMagick .

Exemplo de uso: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

PLA
fonte
4

Foi assim que fiz com o AXIOS e o Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

adicione urlPDF dinamicamente ao HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>
Despertaweb
fonte
3

Uma das opções que você deve considerar é PDF notável.
Ele possui um plano gratuito, a menos que você esteja planejando fazer uma colaboração online em tempo real em PDFs

Incorpore o seguinte iframea qualquer html e aproveite os resultados:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
George Pligoropoulos
fonte
2

Para transmitir o arquivo para o navegador, consulte Pergunta sobre estouro de pilha Como transmitir um arquivo PDF como binário para o navegador usando o .NET 2.0 - observe que, com pequenas variações, isso deve funcionar se você estiver exibindo um arquivo do sistema de arquivos ou gerado dinamicamente.

Dito isso, o artigo mencionado do MSDN adota uma visão bastante simplista do mundo; portanto, você pode ler com êxito um fluxo de PDF para um navegador através do HTTPS , bem como para alguns dos cabeçalhos que você precisa fornecer.

Usando essa abordagem, um iframe é provavelmente o melhor caminho a percorrer. Tenha um formulário da Web que transmita o arquivo e, em seguida, coloque o iframe em outra página com o srcatributo definido no primeiro formulário.

GalacticCowboy
fonte
4
@ Downvoter se preocupa em explicar por que você está anonimamente recusando uma resposta de 10 anos?
GalacticCowboy
1
  1. Construa um blob dos bytes PDF de entrada
  2. Use um iframe e PDF.js corrigidos com esta solução alternativa para vários navegadores

O URI para o iframe deve ser algo como isto:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Agora, o FF, o Chrome, o IE 11 e o Edge exibem o PDF em um visualizador no iframe passado pelo URI de blob padrão no URL.

peido
fonte
1

Como tive que visualizar um PDF com o React, depois de tentar várias bibliotecas, minha solução ideal foi buscar os dados e reduzi-los.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>
Pecata
fonte
0

Se você não deseja hospedar o PDF.JS por conta própria, tente o DocDroid . É semelhante ao visualizador de PDF do Google Drive, mas permite a criação de marca personalizada.

Segunda-feira
fonte
-7

Achei que isso funciona muito bem e o navegador lida com isso no Firefox. Eu não verifiquei o IE ...

<script>window.location='url'</script>
Wynn
fonte
O que isso deve alcançar? Não vejo como ele responde à pergunta.
TRiG
Quando estou incorporando um PDF no meu HTML, acho que a melhor maneira é ter um link para este documento. como <a href=" server1.network/trifold_JonesChiro.pdf "target='_blank'> dobrável em três partes do portal do cliente (exemplo) </a> às vezes é uma resposta limpa abrir uma página e mostrar o pdf vs tring para colocá-lo no html. Também permite que o pdf fique aberto em uma guia.
Wynn
Portanto, sua recomendação é vincular, não incorporar? Tudo bem, mas como resposta isso não é claro.
TRiG