Maneira recomendada para incorporar PDF em HTML?





9 Answers

Isso é rápido, fácil, direto 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 Google Chrome no Android não suporta mais incorporações 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">
html pdf

Qual é a maneira recomendada de incorporar PDF em HTML?

  • iFrame?
  • Objeto?
  • Embutir?

O que a Adobe diz sobre isso?

No meu caso, o PDF é gerado na hora, por isso não pode ser enviado para uma solução de terceiros antes de liberá-lo.




Você tem algum controle sobre como o PDF aparece no navegador passando algumas opções na string de consulta. Fiquei feliz com este trabalho, até que percebi que não funciona no IE8. :(

Ele funciona no Chrome 9 e no Firefox 3.6, mas no IE8 ele 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 isso ajude alguém. Isso define o zoom para 85%, remove barras de rolagem, barras de ferramentas e painéis de navegação. Eu atualizarei meu post se eu encontrar algo que funcione no IE também.

<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>



Converta-o para 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 entre navegadores e se o PDF for apenas uma página ou duas. É claro que 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 plugin PHP (chamado imagick) que funciona assim, mas tem seus próprios requisitos especiais.




FDView combina o PDF2SWF (que é baseado no xpdf ) com um visualizador SWF para que você possa converter e incorporar documentos PDF em tempo real em seu 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 um visualizador de Flash com mais facilidade.

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




  1. Crie um contêiner para armazenar seu PDF

    <div id="example1"></div>
  2. Diga PDFObject qual PDF para 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 o CSS para especificar o estilo visual, incluindo dimensões, borda, margens etc.

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

fonte: https://pdfobject.com/




Uma das opções que você deve considerar é o PDF Notável
Ele tem um plano gratuito, a menos que você esteja planejando fazer colaboração on-line em tempo real em pdfs

Incorpore o seguinte iframe a qualquer html e aproveite os resultados:

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



PdfToImageServlet usando o comando de convert do ImageMagick.

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




Foi assim que eu 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>



Se você não quiser hospedar o PDF.JS sozinho, experimente o DocDroid . É semelhante ao visualizador de PDF do Google Drive, mas permite a personalização da marca.






Related


Tags

html   pdf