web-dev-qa-db-pt.com

Maneira recomendada para incorporar PDF em HTML?

Qual é a maneira recomendada de inserir 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.

1080
Daniel Silveira

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

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

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

503
lubos hasko

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

PDATE (1/2018):

O navegador Google Chrome no Android não suporta mais PDF incorporações. Você pode contornar isso usando o visualizador do Google Drive PDF

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
481
Batfan

Você também pode usar o visualizador do Google PDF para essa finalidade. Tanto quanto eu sei, não é um recurso oficial do Google (estou errado sobre isso?), Mas funciona para mim muito bem e sem problemas. Você precisa fazer upload de seu PDF em algum lugar antes e apenas usar seu 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 não precisa de um Flash Player, ele usa JavaScript.

344
Lukasz Korzybski

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 em 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>
101
Gayle

O uso de <object> e <embed> proporcionará uma maior abrangência da compatibilidade do 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>
53
Suneel Kumar

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 entre navegadores PDF e se PDF tiver 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. Existe também um plugin PHP (chamado imagick) que funciona assim mas tem seus próprios requisitos especiais.

20
Dan Mantyla

Dê uma olhada neste 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>
16
amIT

FDView combinações PDF2SWF (que em si é baseado em xpdf ) com um SWF visualizador para que você possa converter e inserir documentos PDF rapidamente em seu servidor.

o xpdf não é um conversor perfeito PDF. Se você precisa de melhores resultados, então Ghostview tem alguma capacidade de converter documentos PDF em outros formatos que você pode ser capaz de construir mais facilmente um visualizador de Flash para.

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

12
Adam Davis

Nosso problema é que por razões legais nós 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 Visualizar no navegador.

Primeiramente nós tentamos o PDF.jS. Funcionou com o Base64 no visualizador do Firefox e do Chrome. No entanto, foi inaceitavelmente lento para o nosso PDF. IE/Edge não funcionou de todo.

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

A solução IFrame também funcionaria para o Chrome e para o co. 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 "download" "na pré-visualização . O campo oculto obrigatório pdfHelperTransferData (para enviar os dados do formulário necessários para PDF geração) não está mais definido porque o PDF é exibido em um IFrame. Para este recurso/bug, consulte o Chrome envia duas solicitações ao fazer o download de um PDF (e cancela uma delas) .

Agora o problema das crianças 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). Nós 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 o esforço. Você pode encontrar a nossa solução para o download aqui: Download 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 para o IE/Edge, veja aqui: Como posso detectar o Internet Explorer (IE) e o Microsoft Edge usando JavaScript? Espero que essas descobertas salvem outra pessoa na hora.

8
George Maharis

O Scribd não exige mais que você hospede seus documentos no servidor deles. Se você criar uma conta com eles, receberá 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 do desenvolvedor.

7
Bjorn
  1. Crie um contêiner para armazenar seu PDF

    <div id="example1"></div>
    
  2. Diga ao 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/

7
Said Bouigherdaine

Uma das opções que você deve considerar é PDF notável
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 todo o HTML e aprecie os resultados:

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

PdfToImageServlet usando o comando convert do ImageMagick.

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

3
PLA
<object width="400" height="400" data="helloworld.pdf"></object>
3
Daryl H

Para transmitir o arquivo para o navegador, consulte a questão do Stack Overflow Como transmitir um arquivo PDF como binário para o navegador usando o .NET 2. - observe que, com pequenas variações, isso deve funcionar se você estiver exibindo um arquivo do sistema de arquivos ou gerado dinamicamente.

Com isso dito, o artigo do MSDN referenciado adota uma visão bastante simplista do mundo, portanto, convém ler Transmitir com êxito um PDF para o navegador por meio do HTTPS também para alguns dos cabeçalhos que você pode precisar fornecer.

Usando essa abordagem, um iframe é provavelmente o melhor caminho a percorrer. Tenha um webform que transmita o arquivo e, em seguida, coloque o iframe em outra página com seu atributo src definido para o primeiro formulário.

2
GalacticCowboy

Foi assim que eu fiz com AXIOS e 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>
1
Despertaweb

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

0
Ahmedakhtar11
  1. Construa um blob da entrada PDF bytes
  2. Use um iframe e PDF.js corrigido com este solução cruzada do navegador

O URI para o iframe deve ser algo como isto:

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

Agora, FF, Chrome, IE 11 e Edge exibem o PDF em um visualizador no iframe transmitido por meio do URI de blob padrão no URL.

0
fartwhif