página - tag html para pdf




Maneira recomendada para incorporar PDF em HTML? (13)

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.


  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.


  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/


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>

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

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

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

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.


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>

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.


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.


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>

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>

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.


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




pdf