Biblioteca de visualizador de PDF JavaScript de código aberto

O que é PDFObject?

PDFObject é uma biblioteca JavaScript gratuita e de código aberto desenvolvida para incorporar documentos PDF em páginas da web. Ela funciona gerando um elemento HTML embed e, em seguida, integrando-o à estrutura HTML. O elemento embed então renderiza o documento PDF. PDFObject não é um renderizador em si; em vez disso, ele se concentra em criar o elemento embed e colocá-lo dentro do HTML. Ele pode criar elementos embed para exibir PDFs em tamanho real ou dentro de seções especificadas da página da web.

A seguir estão alguns dos principais recursos do PDFObject:

• Mecanismo de fallback: o PDFObject tem um mecanismo de fallback, então, nos casos em que um navegador não suporta a incorporação de PDFs, o PDFObject ativa automaticamente a lógica de fallback, permitindo que os desenvolvedores forneçam um link para o PDF ou qualquer outra lógica alternativa, conforme necessário.
• Integração com PDF.js: O PDFObject fornece integração opcional com PDF.js, permitindo que os desenvolvedores incorporem PDFs independentemente do visualizador de PDF padrão do navegador. Esse recurso é útil quando o navegador não oferece suporte à incorporação de documentos PDF no HTML.
• Parâmetros de Abertura de PDF: O PDFObject suporta os Parâmetros de Abertura de PDF proprietários da Adobe, permitindo que os desenvolvedores especifiquem parâmetros para exibição de PDF. Isso inclui opções como modo de visualização e outras configurações específicas da Adobe. Todos esses parâmetros podem ser encontrados aqui.

Estatísticas do GitHub

Nome:
Linguagem:
Estrelas:
Garfos:
Licença:
O repositório foi atualizado pela última vez em

Introdução ao PDFObject

Podemos baixar a biblioteca PDFObject usando o módulo npm:

npm i pdfobject

Incorporar PDF em HTML com verificação de suporte do navegador

Podemos incorporar um documento PDF em HTML usando a biblioteca PDFObject. Inicialmente, verificaremos se o navegador suporta a incorporação do documento PDF em HTML usando o método supportsPDFs da biblioteca PDFObject. Se retornar true indicando que suporta a incorporação de PDF em HTML, então incorporaremos o PDF no HTML usando o método embed("document_name.pdf","#elementid"). Esta função incorporará o PDF em um elemento específico no HTML. Para a incorporação de PDF em tamanho real, não mencionaremos nenhum id de elemento e chamaremos o método como embed("document_name.pdf"). No entanto, se retornar false indicando que não suporta a incorporação de PDF em HTML, então passaremos para outra lógica alternativa conforme necessário. Verifique o trecho de código abaixo para obter os detalhes:

Saída

A saída a seguir exibe o documento PDF incorporado no HTML:

Crie um mecanismo de fallback

Podemos estabelecer um mecanismo de fallback ao incorporar um PDF em uma página da web usando PDFObject que é ativado quando o navegador não suporta a incorporação de PDF em HTML. PDFObject utiliza um parâmetro chamado fallbackLink que contém uma lógica alternativa ao chamar a função embed. Então, se um navegador não suporta a incorporação de PDFs, o código presente no fallbackLink é executado no elemento div designado. Verifique o snippet de código abaixo para obter os detalhes:

Saída

A captura de tela de saída exibe o conteúdo exibido pelo mecanismo de fallback. O mecanismo de fallback foi ativado quando o navegador não suportava incorporar PDFs em HTML.

Incorporar PDF com os parâmetros abertos de PDF da Adobe

Podemos incorporar PDFs junto com alguns parâmetros de abertura usando a biblioteca PDFObject. Usaremos o método PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) para incorporar o documento PDF no HTML junto com os parâmetros de abertura. Esses Parâmetros de abertura de PDF incluem recursos como abrir o PDF e rolar para um número de página específico. Verifique o trecho de código abaixo para obter os detalhes:

Saída

A captura de tela a seguir mostra o documento PDF incorporado no HTML com parâmetros adicionais que fazem o elemento incorporado rolar para a página número 3 após renderizá-lo:

Incorpore PDF integrando PDF.js

Como sabemos, o PDFObject depende do suporte do navegador para incorporar PDFs em HTML, mas ele fornece um método alternativo para renderizar PDFs se o navegador não o suportar. O método alternativo é integrar PDF.js com o PDFObject. Para fazer isso, teremos que configurar o PDF.js em nosso servidor e então passaremos os parâmetros ForcePDFJS: true e PDFJS_URL: path/to/viewer.html/in/pdf.js para a função embed.

Observação: No trecho de código de exemplo abaixo, criamos e iniciamos um servidor contendo a biblioteca PDF.js, então http://localhost:8888 aponta para a biblioteca PDF.js.

Saída

A captura de tela a seguir mostra o documento PDF renderizado pela integração do PDFObject com o PDF.js:

Conclusão

Concluindo, PDFObject é uma biblioteca JavaScript fácil de usar para incorporar documentos PDF em HTML. Embora não funcione como um renderizador e dependa do suporte do navegador para elementos incorporados, o que pode causar problemas como uma IU quebrada em navegadores que não suportam elementos incorporados, a biblioteca tem recursos para resolver esses problemas por meio de sua detecção de suporte para elementos incorporados e mecanismo de fallback. Também podemos renderizar PDFs em navegadores que não suportam elementos incorporados integrando PDF.js com o PDFObject. Apesar de suas limitações, o PDFObject se destaca como uma ferramenta valiosa para incorporar e renderizar documentos PDF em páginas da web.

Produtos Similares