página - Maneira recomendada para incorporar PDF em HTML?




exibir no (17)

  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/

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.


Nosso problema é que, por motivos legais, não podemos 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 que com o PDF.js). No Chrome / Firefox / Safari novamente, não há problema. É por isso que escolhemos uma solução híbrida. IE / Edge usamos um IFrame e para todos os outros navegadores a tag do objeto.

A solução IFrame também funcionaria para o Chrome e 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 visualização . O obrigatório campo secreto pdfHelperTransferData (para enviar nossos dados de formulário necessários para geração de PDF) não é mais definido porque o PDF é exibido em um IFrame. Para este recurso / bug, 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 nossa solução para o download aqui: Baixe o 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.


  1. Construir um blob dos bytes PDF de entrada
  2. Use um iframe e PDF.js corrigidos com essa solução alternativa de navegador cruzado

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 na URL.


Você também pode usar o visualizador de PDF do Google 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 o upload do seu PDF em algum lugar antes e apenas usar o URL dele:

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


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>

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>

Eu encontrei isso funciona muito bem eo navegador lida com ele no firefox. Eu não verifiquei o IE ...

<script>window.location='url'</script>

Para transmitir o arquivo para o navegador, consulte a questão do 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.

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 de HTTPS , bem como para alguns dos cabeçalhos que talvez seja necessário 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 o atributo src definido no primeiro formulário.


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>

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.


PdfToImageServlet usando o comando de convert do ImageMagick.

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



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. Leva apenas algumas linhas de código JavaScript para carregar arquivos PDF armazenados em seu próprio servidor.

Para mais detalhes, consulte Ferramentas do desenvolvedor .


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

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>

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.


Se você estiver usando um formulário interno, adicione o atributo type = "reset" junto com o elemento button. Isso impedirá a ação do formulário.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>




html pdf