import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

FERRAMENTAS DE PDF

Como visualizar arquivos PDF em JavaScript

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Atualizado:julho 28, 2025

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:

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.
Crie uma função chamada viewPDF que será usada para converter a seção da página da web selecionada em um PDF. Utilize a função getElementById para selecionar o segmento desejado.
Antes de passar 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.
Inclua um botão em sua página HTML que, ao ser clicado, acione 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">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

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

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

<!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);
  }
})();

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 $799, 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.

Darrius Serrant

Converse agora mesmo com a equipe de engenharia.

Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...