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




10 Answers

Provavelmente, a melhor abordagem é usar a biblioteca PDF.JS É um renderizador HTML5 / JavaScript puro para documentos PDF sem nenhum plug-in de terceiros.

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

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

exibir no

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




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>



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>



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 .




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.




<object width="400" height="400" data="helloworld.pdf"></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.




  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.




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

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



Related

html pdf

Tags

html   pdf