Maneira recomendada de incorporar PDF em HTML?

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.

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

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

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.

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>

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>

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.

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>

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.

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.

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>

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/

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 .

<object width="400" height="400" data="helloworld.pdf"></object>

PdfToImageServlet usando o convertcomando ImageMagick .

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

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>

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>

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.

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.

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>

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.

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>