IRONSOFTWAREHOME
FERRAMENTAS DE PDF

Como visualizar arquivos PDF em JavaScript

Curtis Chau
Curtis Chau
Updated: 23 de abril de 2026

A Adobe criou o formato de documento portátil (PDF) para permitir o compartilhamento de documentos que contenham muito texto e gráficos. Para abrir um arquivo PDF online, é necessário um programa diferente. Os arquivos PDF são indispensáveis ​​no ambiente atual para publicações de grande porte. São frequentemente utilizadas no mundo empresarial para produzir documentos e faturas. Os desenvolvedores geram arquivos PDF para atender às demandas dos clientes. As bibliotecas modernas tornaram a criação de PDFs mais fácil do que nunca. Ao selecionar a biblioteca apropriada para um projeto que gera seus próprios arquivos PDF renderizados, vários aspectos precisam ser considerados, incluindo recursos de criação, leitura e conversão.

Bibliotecas JavaScript 2.0

Considere, por exemplo, o cenário em que desejamos que o cliente possa baixar e visualizar uma cópia da nossa fatura. Outros aspectos igualmente importantes para nós são o layout correto, a impressão e o número de páginas dessa fatura. Nesta seção, examinaremos algumas das bibliotecas mais populares para visualização de documentos PDF.

2.1 HTML2PDF

O HTML2PDF combina as funcionalidades do jsPDF e do Html2Canvas em um único módulo para transformar páginas e modelos da web em arquivos PDF completos.

Siga estes passos para criar um PDF a partir do seu site:

  1. Instale a biblioteca JavaScript html2pdf localmente em seu servidor usando o NPM ou adicione-a ao seu código HTML, conforme mostrado no exemplo abaixo.
  2. Crie uma função chamada viewPDF que será usada para converter a seção de página da web alvo em um PDF. Use a função getElementById para selecionar o segmento desejado.
  3. Antes de passá-lo para html2pdf, modifique as opções de formatação adicionando-as à variável opt. Isso permite personalizar várias configurações para a produção de PDFs.
  4. Inclua um botão em sua página HTML que, quando clicado, aciona a função viewPDF. Esta função irá gerar o PDF e abri-lo em uma nova aba do navegador.
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');
      
      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };
      
      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>
HTML

Como visualizar arquivos PDF em JavaScript: Figura 1

2.3 jsPDF

O software de código aberto jsPDF cria arquivos PDF usando exclusivamente JavaScript. Ele gera um objeto de página como uma página PDF e a formata com base na formatação fornecida. A biblioteca de PDF mais utilizada e bem mantida no GitHub também se chama jsPDF. Ele fornece módulos fáceis de usar tanto para Node.js quanto para navegadores da web, pois são exportados em conformidade com o padrão de módulo AMD.

No caso do PDFKit, suas APIs seguem um modelo imperativo, o que pode dificultar a criação de layouts complexos. O único passo adicional necessário para incorporar fontes com JavaScript é converter as fontes em arquivos TTF, o que é um procedimento simples. No exemplo de código abaixo, criamos um arquivo PDF e, em seguida, abrimos o PDF criado em uma aba separada em um navegador da web.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });
      
      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>
HTML

2.3 IronPDF

IronPDF for Node.js simplifica o processo de criação e personalização programática de documentos PDF. Desenvolvido pela Iron Software, um fornecedor confiável de bibliotecas de processamento de documentos de alto desempenho, o IronPDF oferece uma solução robusta para geração de PDFs em ambientes Node.js Ele se integra perfeitamente a projetos Node.js , fornecendo aos desenvolvedores ferramentas poderosas para gerar, formatar e editar PDFs com facilidade.

Principais funcionalidades do IronPDF for Node.js:

Geração versátil de PDFs: Com o IronPDF, os desenvolvedores podem gerar PDFs a partir de diversas fontes, incluindo HTML, CSS, JavaScript, imagens e outros tipos de arquivo. Essa flexibilidade permite a criação de documentos PDF dinâmicos e visualmente atraentes, adaptados a requisitos específicos.

  • Personalização avançada de documentos: o IronPDF permite que os desenvolvedores aprimorem documentos PDF com recursos como cabeçalhos, rodapés, anexos, assinaturas digitais, marcas d'água e marcadores. Isso permite a criação de PDFs de nível profissional com conteúdo rico e elementos interativos.
  • Recursos de segurança: O IronPDF oferece recursos de segurança robustos para proteger PDFs contra acesso não autorizado. Os desenvolvedores podem implementar medidas de segurança como senhas, assinaturas digitais, metadados e outras configurações de segurança para proteger informações confidenciais contidas em documentos PDF.
  • Desempenho otimizado: O IronPDF foi projetado para oferecer desempenho ideal, apresentando suporte completo a multithreading e operações assíncronas. Isso garante a geração eficiente de PDFs, tornando-os adequados para aplicações de missão crítica onde o desempenho é fundamental.
  • Conjunto abrangente de recursos: Com mais de 50 recursos para criar, formatar e editar documentos PDF, o IronPDF oferece uma solução completa para todas as tarefas relacionadas a PDFs. Desde a geração básica de documentos até a personalização e segurança avançadas, o IronPDF oferece uma ampla gama de recursos para atender às necessidades dos desenvolvedores.

O exemplo de código a seguir cria o documento PDF usando JavaScript e, em seguida, o documento é visualizado diretamente do aplicativo:

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();
JavaScript

Neste código:

  • Geramos o documento PDF (pdf) a partir do conteúdo HTML.
  • Salvamos o documento PDF em um arquivo temporário (html-with-assets.pdf) usando saveAs.
  • Usamos a função open do pacote open para abrir o arquivo PDF usando o aplicativo padrão do sistema. Normalmente, isso abrirá o PDF no visualizador de PDF padrão instalado no sistema ou, caso contrário, no navegador padrão.

Para obter mais exemplos de código sobre tarefas relacionadas a PDF, visite esta página de exemplos de código IronPDF Node.js

Como visualizar arquivos PDF em JavaScript: Figura 2

O resultado será gerado e exibido conforme a imagem acima. Para saber mais sobre o IronPDF, consulte o Guia do Visualizador de PDF IronPDF .NET .

3.0 Conclusão

Por fim, é importante observar que o código JavaScript exibido na primeira página acima tem potencial para ser usado indevidamente e pode representar riscos de segurança quando utilizado por terceiros. Ao incorporar esse tipo de código em uma página ou site da web, é crucial considerar os riscos de acesso não autorizado e vulnerabilidades de segurança de dados. Além disso, devem ser levados em consideração os problemas de compatibilidade com navegadores desatualizados e diferentes sistemas operacionais e navegadores.

Em contrapartida, a biblioteca IronPDF Node.js oferece medidas de segurança aprimoradas para proteção contra possíveis ameaças. Não depende de navegadores específicos e é compatível com todos os principais navegadores. Com apenas algumas linhas de código, os desenvolvedores podem facilmente criar e ler arquivos PDF usando o IronPDF.

A biblioteca oferece diversas opções de licenciamento para atender às diferentes necessidades dos desenvolvedores, incluindo uma licença de avaliação gratuita e licenças adicionais para compra . O pacote Lite, com preço de $999, inclui uma licença permanente, um ano de suporte ao produto e opções de atualização, sem taxas recorrentes. Essas licenças podem ser usadas em ambientes de desenvolvimento, teste e produção. Além disso, o IronPDF também está disponível para outras linguagens como C# .NET , Java e Python . Visite o site da IronPDF para obter mais detalhes.

Curtis Chau
Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.

...
Leia mais

Artigos relacionados

Key in blue circle

Obtenha sua chave de avaliação gratuita de 30 dias instantaneamente.

Your trial license will be sent to your email address

Sem limitações. 100% desbloqueado. Sem cartão de crédito.

bullet_checkedNão é necessário cartão de crédito nem criação de conta.Sem limitações. 100% desbloqueado. Sem cartão de crédito.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
Agende sua demonstração ao vivo gratuita.
Booking Badge

Aprovado por milhões de engenheiros em todo o mundo.

Logotipos dos clientes da Iron Software
Agende sua consulta sem compromisso.
Preencha o formulário abaixo ou envie um e-mail para sales@ironsoftware.com
Os seus dados serão sempre mantidos em sigilo.
Aprovado por milhões de engenheiros em todo o mundo.
Logotipos dos clientes da Iron Software
Obtenha sua chave de avaliação gratuita de 30 dias instantaneamente.
Não é necessário cartão de crédito nem criação de conta.