Convert HTML to PDF in Node.js

Instale a biblioteca IronPDF.

Instale o pacote IronPDF Node.js executando o comando NPM abaixo no projeto Node.js escolhido:

 npm e @ironsoftware/ironpdf

Você também pode baixar e instalar o pacote IronPDF manualmente.

Como você instala o motor IronPDF?

IronPDF for Node.js requer um binário do motor IronPDF para funcionar.

Instale o binário do motor IronPDF instalando o pacote apropriado para o seu sistema operacional.

Como Aplicar uma Chave de Licença?

Por padrão, o IronPDF marca todos os documentos que gera ou modifica com uma marca d'água. Para remover a marca d'água, defina a propriedade licenseKey no objeto global IronPdfGlobalConfig com uma chave de licença válida:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config.js

import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";

// Retrieve the global configuration object
var config = IronPdfGlobalConfig.getConfig();

// Set a valid license key to remove watermarks
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Obtenha uma chave de licença de teste gratuita ou compre uma chave de licença na página de licenciamento.

Os exemplos de código restantes neste tutorial assumem que uma chave de licença foi aplicada em um arquivo config.js separado, que é importado no início de cada script:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config-import.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...

Obtenha uma chave de licença em IronPDF para gerar documentos PDF sem marcas d'água.

Como você cria um PDF a partir de uma string HTML? {#create-pdf-from-html-string}

PdfDocument.fromHtml gera PDFs a partir de strings de marcação HTML brutas. Essa abordagem oferece a maior flexibilidade dos quatro métodos, pois a string HTML pode ser obtida de praticamente qualquer lugar — arquivos de texto, fluxos de dados, um mecanismo de modelo HTML ou marcação construída dinamicamente.

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-string-to-pdf.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");

// Save the PDF document to the file system
await pdf.saveAs("html-string-to-pdf.pdf");

PdfDocument.fromHtml retorna uma Promessa que resolve para uma instância da classe PdfDocument. Após obter a instância, chame saveAs com um caminho de arquivo de destino para gravar o PDF no disco. O arquivo PDF salvo renderiza o HTML exatamente como um navegador compatível com os padrões o exibiria.

The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. Os arquivos PDF que PdfDocument.fromHtml gera aparecem exatamente como o conteúdo da página web apareceria.

Como você cria um PDF a partir de um arquivo HTML? {#create-pdf-from-html-file}

PdfDocument.fromHtml também aceita um caminho para um documento HTML local. Em vez de uma string de marcação, passe um caminho de arquivo válido como o primeiro argumento. Esta é a abordagem preferida ao trabalhar com páginas da web salvas que fazem referência a ativos locais de CSS, JavaScript e imagem.

O exemplo a seguir converte uma página da web de exemplo em um PDF:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-file-to-pdf.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from a local HTML file
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the project directory
await pdf.saveAs("html-file-to-pdf-1.pdf");

A página HTML de exemplo como aparece no Google Chrome. Baixe esta e outras páginas similares no site File Samples: https://filesamples.com/samples/code/html/sample2.html

IronPDF preserva a aparência do documento HTML original e mantém a funcionalidade de links, formulários e outros elementos interativos. Essa fidelidade se estende a páginas complexas que incluem parágrafos, listas, imagens, hyperlinks e scripts no lado do cliente.

Este PDF foi gerado a partir do exemplo de arquivo HTML acima. Compare sua aparência com a imagem anterior — IronPDF preserva o layout com alta fidelidade.

IronPDF lida com páginas que vão muito além da marcação simples. O exemplo a seguir converte uma página rica em recursos que obtém numerosos arquivos CSS externos, imagens e ativos de script:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-complex-file-to-pdf.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from a complex HTML page with external assets
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

Se parecer bom no Google Chrome, parecerá bom quando convertido para PDF. Isso inclui designs de página fortemente baseados em CSS e renderizados por JavaScript.

Como você cria um PDF a partir de uma URL? {#create-pdf-from-url}

PdfDocument.fromUrl busca e renderiza uma página da web ao vivo como um PDF. Passe qualquer URL publicamente acessível como argumento. O mecanismo de renderização Chrome do IronPDF recupera a página, carrega todos os recursos e produz um PDF perfeito — sem necessidade de download manual do HTML.

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/url-to-pdf.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Convert a live web page to a PDF
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document
await pdf.saveAs("url-to-pdf.pdf");

O artigo da Wikipédia sobre o formato PDF, tal como aparece num navegador web compatível com as normas.

O PDF gerado ao chamar PdfDocument.fromUrl em um artigo da Wikipedia. Note sua semelhança próxima com a página da web original.

Como você cria um PDF a partir de um arquivo ZIP? {#create-pdf-from-zip}

PdfDocument.fromZip converte um arquivo HTML específico contido em um arquivo ZIP em um PDF. Isso é particularmente útil ao distribuir projetos HTML autossuficientes que agrupam seus ativos HTML, CSS e imagem juntos.

Para este exemplo, assuma que o diretório do projeto contém um arquivo ZIP com a seguinte estrutura:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-structure.txt
html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

O arquivo index.html contém:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF para Node.js">
    </a>
  </body>
</html>

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF para Node.js">
    </a>
  </body>
</html>

E style.css declara as regras de layout da página e fonte:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/style.css
@font-face {
  font-family: 'Gotham-Black';
  src: url('gotham-black-webfont.eot?') format('embedded-opentype'), 
       url('gotham-black-webfont.woff2') format('woff2'), 
       url('gotham-black-webfont.woff') format('woff'), 
       url('gotham-black-webfont.ttf') format('truetype'), 
       url('gotham-black-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: auto;
  color: white;
  background-color: black;
  text-align: center;
  font-family: "Helvetica"
}

h1 {
  font-family: "Gotham-Black";
  margin-bottom: 70px;
  font-size: 32pt;
}

img {
  width: 400px;
  height: auto;
}

p {
  text-decoration: underline;
  font-size: smaller;
}

A imagem de exemplo dentro do arquivo ZIP HTML hipotético.

Ao chamar fromZip, especifique o caminho para o arquivo ZIP como o primeiro argumento e um objeto de configuração como o segundo. Defina a propriedade mainHtmlFile para o nome do arquivo HTML dentro do arquivo que deve ser convertido:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-to-pdf.js

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Convert an HTML file from a ZIP archive to PDF
PdfDocument.fromZip("./html-zip.zip", {
  mainHtmlFile: "index.html"
}).then(async (pdf) => {
  return await pdf.saveAs("html-zip-to-pdf.pdf");
});

Criação de PDF usando PdfDocument.fromZip. A função renderiza com sucesso o código HTML do arquivo ZIP juntamente com seus ativos agrupados.

Minha biblioteca favorita desse tipo é o IronPDF. Ele permite a manipulação rápida e eficiente de arquivos PDF. Além disso, possui muitos recursos valiosos, como a exportação para o formato PDF/A e a assinatura digital de documentos PDF.

Milan Jovanovic

Microsoft MVP

Veja o estudo de caso

Com o IronOCR, podemos economizar US$ 40.000 por ano em processamento manual, ao mesmo tempo que aumentamos a produtividade e liberamos recursos para tarefas de alto impacto. Eu o recomendo fortemente.

Brent Matzelle

Diretor de Tecnologia, OPYN

Veja o estudo de caso

O IronSuite desempenha um papel crucial nas nossas operações. Estas são ferramentas que aumentam a eficiência no negócio, incluindo a criação de plantas baixas e melhoria na gestão de inventário.

David Jones

Engenheiro(a) de Software Líder, Agorus Build

Veja o estudo de caso

Como adicionar cabeçalhos e rodapés? {#add-headers-footers}

As propriedades textHeader e textFooter afixam conteúdo baseado em texto personalizado em todas as páginas de um PDF recém-renderizado. O seguinte exemplo cria um PDF da página inicial do Google com um cabeçalho e rodapé personalizados, cada um usando uma fonte diferente:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/custom-headers-footers.js

import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Start from default render options
var options = defaultChromePdfRenderOptions();

// Configure a text-based header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Configure a text-based footer
options.textFooter = {
  centerText: "IronPDF for Node.js",
  dividerLine: true,
  fontSize: 14,
  font: AffixFonts.Helvetica,
  rightText: "HTML to PDF in Node.js"
};

// Render the page with custom headers and footers applied
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

Um PDF gerado a partir da página inicial do Google com um cabeçalho de texto personalizado e rodapé aplicados usando textHeader e textFooter.

Para layouts de cabeçalho e rodapés mais ricos, use as propriedades htmlHeader e htmlFooter em vez disso. Essas aceitam fragmentos de HTML bruto, dando total controle sobre tipografia, imagens e alinhamento. O exemplo abaixo centraliza a URL da página em negrito no cabeçalho e insere uma imagem de logotipo no rodapé:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-headers-footers.js

import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Start from default render options
var options = defaultChromePdfRenderOptions();

// Define a rich HTML header
options.htmlHeader = {
  htmlFragment: "<strong>https://www.google.com/</strong>",
  dividerLine: true,
  dividerLineColor: "blue",
  loadStylesAndCSSFromMainHtmlDocument: true,
};

// Define a rich HTML footer with a logo
options.htmlFooter = {
  htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
  dividerLine: true,
  loadStylesAndCSSFromMainHtmlDocument: true
};

// Apply custom HTML headers and footers during rendering
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

IronPDF suporta cabeçalhos e rodapés baseados em HTML, dando total controle sobre branding e layout em cada página.

Como você controla o tamanho da página, a orientação e as margens? {#page-size-orientation-margins}

As propriedades margin, paperSize, fitToPaperMode, paperOrientation e grayScale em ChromePdfRenderOptions controlam o layout físico de cada página renderizada. O exemplo a seguir converte a página inicial do Google com margens personalizadas, orientação paisagem A5 e saída em escala de cinza:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/page-size-orientation.js

import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Start from default render options
var options = defaultChromePdfRenderOptions();

// Set page margins in millimeters
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};

// Configure paper size, fit mode, orientation, and color mode
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Render with the customized layout settings
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

A enumeração PaperSize inclui tamanhos de papel padrão, como A4, A5, Letter e Legal. A enumeração PdfPaperOrientation suporta Portrait e Landscape. Essas configurações dão controle preciso sobre as dimensões de saída para documentos prontos para impressão.

Como você lida com páginas da web dinâmicas? {#dynamic-web-pages}

Páginas que carregam conteúdo de forma assíncrona — através de timers do JavaScript, lazy loading ou chamadas de API — podem não estar totalmente renderizadas no momento em que o mecanismo do IronPDF as captura. O mecanismo WaitFor, configurado através da propriedade waitFor em ChromePdfRenderOptions, instrui o renderizador do Chrome a pausar até que as condições especificadas sejam atendidas antes de capturar a página.

O bloco de código a seguir define o IronPDF para aguardar 20 segundos antes de capturar o conteúdo da página:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-delay.js

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the renderer to wait 20 seconds before capturing
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.RenderDelay,
  delay: 20000
};

PdfDocument.fromUrl("https://ironpdf.com/nodejs/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-renderdelay.pdf");
});

Alternativamente, configure o IronPDF para aguardar até que um elemento DOM específico apareça antes de renderizar. Isso é útil para páginas onde o conteúdo é injetado após um framework JavaScript concluir a montagem:

:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-element.js

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the renderer to wait for a specific DOM element (up to 20 seconds)
var options = defaultChromePdfRenderOptions();
options.waitFor = {
  type: WaitForType.HtmlElement,
  htmlQueryStr: "div.ProseMirror",
  maxWaitTime: 20000,
};

PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("waitfor-htmlelement.pdf");
});

A estratégia WaitForType.HtmlElement usa um seletor de consulta CSS padrão. O renderizador verifica pela presença do elemento até que maxWaitTime milissegundos se passem ou o elemento seja encontrado — o que ocorrer primeiro.