Instale a biblioteca IronPDF.

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

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdf

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdf

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

T27. ### Como você instala o motor IronPDF?

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

T29.

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

Como Aplicar uma Chave de Licença?

T33. 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}";

//: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}";

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

T36. {i:(Defina a chave de licença e quaisquer outras [configurações globais antes de chamar outras funções da biblioteca. T37. Isso garante desempenho ótimo e funcionamento correto em todo o aplicativo.)}]

//: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
// ...

//: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
// ...

Cada abordagem utiliza a classe PdfDocument como base. Um PdfDocument representa um arquivo PDF produzido a partir de algum conteúdo de origem e é responsável pela maioria das principais funcionalidades de criação e edição do IronPDF.

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

PdfDocument.fromHtml gera PDFs a partir de sequências de código HTML bruto. Essa abordagem oferece a maior flexibilidade entre os quatro métodos, pois a sequência HTML pode ser obtida de praticamente qualquer lugar — arquivos de texto, fluxos de dados, um mecanismo de modelos 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");

//: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 Promise 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. T54. 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 gerados por PdfDocument.fromHtml aparecem exatamente como o conteúdo de uma página da web.

T58. ### 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. T60. Em vez de uma string de marcação, passe um caminho de arquivo válido como o primeiro argumento. T61. Esta é a abordagem preferida ao trabalhar com páginas da web salvas que fazem referência a ativos locais de CSS, JavaScript e imagem.

T62. 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");

//: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");

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

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

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

T71. 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");
});

//: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");
});

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

T75.

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

PdfDocument.fromUrl busca e renderiza uma página da web em tempo real como um PDF. T80. Passe qualquer URL publicamente acessível como argumento. T81. 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");

//: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 pela chamada PdfDocument.fromUrl em um artigo da Wikipédia. T85. Note sua semelhança próxima com a página da web original.

T86.

T88. ### 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. T90. Isso é particularmente útil ao distribuir projetos HTML autossuficientes que agrupam seus ativos HTML, CSS e imagem juntos.

T91. 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 for 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 for Node.js">
    </a>
  </body>
</html>

E style.css declara o layout da página e as regras de 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;
}

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

Ao chamar fromZip, especifique o caminho para o arquivo ZIP como primeiro argumento e um objeto de configuração como segundo. Defina a propriedade mainHtmlFile com o nome do arquivo HTML dentro do arquivo compactado 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");
});

//: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. T100. A função renderiza com sucesso o código HTML do arquivo ZIP juntamente com seus ativos agrupados.

T101. ## Quais opções avançadas de renderização o IronPDF suporta? T102. {#advanced-rendering-options}

A interface ChromePdfRenderOptions expõe propriedades para personalização detalhada do comportamento de renderização de PDFs. T104. Essas configurações se aplicam antes que o PDF seja gerado e abrangem layout, aparência visual e casos de borda para conteúdo dinâmico.

T105. IronPDF aplica configurações de renderização padrão a cada conversão. Recupere esses valores padrão com a função defaultChromePdfRenderOptions:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/default-options.js
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";

// Retrieve a ChromePdfRenderOptions object with default settings
var options = defaultChromePdfRenderOptions();

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/default-options.js
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";

// Retrieve a ChromePdfRenderOptions object with default settings
var options = defaultChromePdfRenderOptions();

Modifique as propriedades do objeto retornado conforme necessário e passe-o para o parâmetro renderOptions de qualquer método de conversão.

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

As propriedades textHeader e textFooter anexam conteúdo personalizado baseado em texto a cada página de um PDF recém-renderizado. T110. 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");
});

//: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 e rodapé de texto personalizados aplicados usando textHeader e textFooter.

Para layouts de cabeçalho e rodapé mais elaborados, use as propriedades htmlHeader e htmlFooter. T114. Essas aceitam fragmentos de HTML bruto, dando total controle sobre tipografia, imagens e alinhamento. T115. 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");
});

//: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");
});

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

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

As propriedades margin, paperSize, fitToPaperMode, paperOrientation e grayScale em ChromePdfRenderOptions controlam o layout físico de cada página renderizada. T121. 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");
});

//: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. T124. Essas configurações dão controle preciso sobre as dimensões de saída para documentos prontos para impressão.

T125.

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

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

T131. 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");
});

//: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");
});

T132. Alternativamente, configure o IronPDF para aguardar até que um elemento DOM específico apareça antes de renderizar. T133. 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");
});

//: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 utiliza um seletor de consulta CSS padrão. O renderizador verifica a presença do elemento até que maxWaitTime milissegundos se passem ou o elemento seja encontrado — o que ocorrer primeiro.

T136.

T138. ## Como você gera PDFs a partir de um template HTML? T139. {#html-template-to-pdf}

T140. Um padrão comum de automação no mundo real é gerar um lote de PDFs a partir de um template HTML compartilhado, substituindo valores de espaço reservado por dados de um banco de dados, API ou planilha. O método replaceText do IronPDF em PdfDocument lida com isso diretamente.

O modelo de fatura abaixo (adaptado de um modelo de fatura do CodePen de acesso público) usa marcadores de posição entre chaves, como {COMPANY-NAME}, {FULL-NAME} e {INVOICE-NUMBER}, para conteúdo substituível:

T144. Um modelo de invoice de exemplo com etiquetas de espaço reservado. T145. Código JavaScript substituirá cada etiqueta com dados reais antes de o documento ser salvo como PDF.

T146. O código a seguir carrega o template, substitui cada espaço reservado com dados de teste e salva o resultado como um PDF:

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-template-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

/**
 * Loads an HTML template from the file system as a PdfDocument.
 */
async function getTemplateHtml(fileLocation) {
  return PdfDocument.fromHtml(fileLocation);
}

/**
 * Saves a PdfDocument to the specified file path.
 */
async function generatePdf(pdf, location) {
  return pdf.saveAs(location);
}

/**
 * Replaces a named placeholder in the PdfDocument with a data value.
 */
async function addTemplateData(pdf, key, value) {
  return pdf.replaceText(key, value);
}

// Path to the HTML invoice template
const template = "./sample-invoice.html";

// Load the template, fill in all placeholder values, then save the PDF
getTemplateHtml(template).then(async (doc) => {
    await addTemplateData(doc, "{FULL-NAME}", "Lizbeth Presland");
    await addTemplateData(doc, "{ADDRESS}", "678 Manitowish Alley, Portland, OG");
    await addTemplateData(doc, "{PHONE-NUMBER}", "(763) 894-4345");
    await addTemplateData(doc, "{INVOICE-NUMBER}", "787");
    await addTemplateData(doc, "{INVOICE-DATE}", "August 28, 2023");
    await addTemplateData(doc, "{AMOUNT-DUE}", "13,760.13");
    await addTemplateData(doc, "{RECIPIENT}", "Celestyna Farmar");
    await addTemplateData(doc, "{COMPANY-NAME}", "BrainBook");
    await addTemplateData(doc, "{TOTAL}", "13,760.13");
    await addTemplateData(doc, "{AMOUNT-PAID}", "0.00");
    await addTemplateData(doc, "{BALANCE-DUE}", "13,760.13");
    await addTemplateData(doc, "{ITEM}", "Training Sessions");
    await addTemplateData(doc, "{DESCRIPTION}", "60 Minute instruction");
    await addTemplateData(doc, "{RATE}", "3,440.03");
    await addTemplateData(doc, "{QUANTITY}", "4");
    await addTemplateData(doc, "{PRICE}", "13,760.13");
    return doc;
}).then(async (doc) => await generatePdf(doc, "html-template-to-pdf.pdf"));

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-template-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

/**
 * Loads an HTML template from the file system as a PdfDocument.
 */
async function getTemplateHtml(fileLocation) {
  return PdfDocument.fromHtml(fileLocation);
}

/**
 * Saves a PdfDocument to the specified file path.
 */
async function generatePdf(pdf, location) {
  return pdf.saveAs(location);
}

/**
 * Replaces a named placeholder in the PdfDocument with a data value.
 */
async function addTemplateData(pdf, key, value) {
  return pdf.replaceText(key, value);
}

// Path to the HTML invoice template
const template = "./sample-invoice.html";

// Load the template, fill in all placeholder values, then save the PDF
getTemplateHtml(template).then(async (doc) => {
    await addTemplateData(doc, "{FULL-NAME}", "Lizbeth Presland");
    await addTemplateData(doc, "{ADDRESS}", "678 Manitowish Alley, Portland, OG");
    await addTemplateData(doc, "{PHONE-NUMBER}", "(763) 894-4345");
    await addTemplateData(doc, "{INVOICE-NUMBER}", "787");
    await addTemplateData(doc, "{INVOICE-DATE}", "August 28, 2023");
    await addTemplateData(doc, "{AMOUNT-DUE}", "13,760.13");
    await addTemplateData(doc, "{RECIPIENT}", "Celestyna Farmar");
    await addTemplateData(doc, "{COMPANY-NAME}", "BrainBook");
    await addTemplateData(doc, "{TOTAL}", "13,760.13");
    await addTemplateData(doc, "{AMOUNT-PAID}", "0.00");
    await addTemplateData(doc, "{BALANCE-DUE}", "13,760.13");
    await addTemplateData(doc, "{ITEM}", "Training Sessions");
    await addTemplateData(doc, "{DESCRIPTION}", "60 Minute instruction");
    await addTemplateData(doc, "{RATE}", "3,440.03");
    await addTemplateData(doc, "{QUANTITY}", "4");
    await addTemplateData(doc, "{PRICE}", "13,760.13");
    return doc;
}).then(async (doc) => await generatePdf(doc, "html-template-to-pdf.pdf"));

T147. O código acima define três funções auxiliares assíncronas:

• getTemplateHtml: Carrega um arquivo HTML em um objeto PdfDocument usando PdfDocument.fromHtml.
• addTemplateData: Chama PdfDocument.replaceText para substituir uma chave de espaço reservado pelo seu valor de dados real.
• generatePdf: Escreve o PdfDocument concluído em um caminho de arquivo de destino.

Cada chamada replaceText opera diretamente na representação PDF na memória, portanto, várias substituições podem ser encadeadas sem recarregar o documento do disco. O PDF resultante mantém todos os estilos CSS, fontes e layout do modelo original.

A fatura PDF concluída com valores de espaço reservado substituídos por dados reais. Os estilos CSS e o layout do modelo original são preservados exatamente.

Essa abordagem escala bem para geração em lote de documentos. Chame getTemplateHtml uma vez por registro para criar um novo PdfDocument para cada arquivo de saída e, em seguida, encadeie as chamadas addTemplateData para os dados desse registro antes de chamar generatePdf.

Quais são os próximos passos? {#próximos-passos}

Este tutorial cobre os métodos principais de conversão de HTML para PDF e as opções de renderização mais frequentemente usadas no IronPDF for Node.js. Os tópicos abaixo ampliam o que você aprendeu aqui para áreas mais especializadas.

• Editar e Carimbar PDFs no Node.js — Aplique carimbos, anotações e edições de texto a documentos PDF existentes programaticamente.
• Mesclar e Dividir PDFs no Node.js — Combine vários PDFs em um único documento ou divida um PDF em páginas separadas.
• Adicionar Marcas d'água a PDFs no Node.js — Aplique marcas d'água de texto ou imagem em todas as páginas de um PDF com controle de posicionamento preciso.
• Referência da API IronPDF for Node.js — Navegue pela API completa para PdfDocument, ChromePdfRenderOptions, WaitFor, AffixFonts e todas as outras classes e interfaces exportadas.
• Obtenha uma Chave de Licença de Avaliação Gratuita — Gere PDFs de qualidade de produção sem marcas d'água ativando uma licença de avaliação gratuita de 30 dias.