HTML para PDF com Node.js

Instale a biblioteca IronPDF for Node.js

Instale o pacote IronPDF for Node.js executando o comando NPM abaixo no seu projeto Node de preferência:

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

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

Instalar o mecanismo IronPDF manualmente (opcional)

Atualmente, o IronPDF for Node.js requer um binário do IronPDF Engine para funcionar corretamente.

Instale o binário do IronPDF Engine instalando o pacote apropriado para o seu sistema operacional:

Aplicar uma chave de licença (opcional)

Por padrão, o IronPDF adiciona uma marca d'água com título como fundo a todos os documentos que gera ou modifica.

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

Para usar o IronPDF sem a marca d'água adicional, você deve definir a propriedade licenseKey no objeto global IronPdfGlobalConfig com uma chave de licença válida. O código-fonte para realizar isso está abaixo:

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

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

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

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

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

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Adquira uma chave de licença em nossa página de licenciamento ou entre em contato conosco para obter uma chave de licença de avaliação gratuita .

As seções seguintes deste tutorial pressupõem que você já possui uma chave de licença e que a configurou em um arquivo JavaScript separado chamado config.js. Importamos este script sempre que utilizarmos alguma funcionalidade do IronPDF :

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

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

Criar um arquivo PDF a partir de uma string HTML

PdfDocument.fromHtml é um método que permite gerar PDFs a partir de sequências de código HTML bruto de páginas da web.

Este método oferece a maior flexibilidade entre as três abordagens. Isso ocorre porque os dados na string HTML podem ser provenientes de praticamente qualquer lugar: arquivos de texto, fluxos de dados, um modelo HTML, dados HTML gerados, etc.

O exemplo de código abaixo demonstra como usar o método PdfDocument.fromHtml na prática:

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

// Create a PDF from the HTML String "Hello world!"
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");

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

// Create a PDF from the HTML String "Hello world!"
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");

Conforme mostrado acima, chamamos o método PdfDocument.fromHtml com uma string de texto contendo o código de marcação para um elemento de título de nível um.

PdfDocument.fromHtml retorna uma Promise que resolve para uma instância da classe PdfDocument . Um PdfDocument representa um arquivo PDF que a biblioteca produziu a partir de algum conteúdo de origem. Essa classe constitui a base da maioria das funcionalidades principais do IronPDF, impulsionando casos de uso significativos na criação e edição de PDFs.

Finalmente, usamos o método saveAs no PdfDocument para salvar o arquivo no disco. O arquivo PDF salvo é mostrado abaixo.

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.

Criar um arquivo PDF a partir de um arquivo HTML

PdfDocument.fromHtml não funciona apenas com strings HTML. O método também aceita um caminho para um documento HTML local.

Em nosso próximo exemplo, trabalharemos com esta página web de exemplo .

Nossa página HTML de exemplo, tal como aparece no Google Chrome. Faça o download desta página e de outras semelhantes no site File Samples:https://filesamples.com/samples/code/html/sample2.html

As linhas de código a seguir convertem todo o documento de exemplo em um PDF. Em vez de uma string HTML, chamamos PdfDocument.fromHtml com um caminho de arquivo válido para nosso arquivo de exemplo:

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

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

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

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

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

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

O conteúdo do PDF resultante está incluído abaixo. Note que o IronPDF não apenas preserva a aparência do documento HTML original, mas também mantém a funcionalidade de links, formulários e outros elementos interativos comuns.

Este PDF foi gerado a partir do exemplo de código anterior. Compare sua aparência com a imagem anterior e observe a notável semelhança!

Se você examinou o código-fonte da página de exemplo, perceberá que ele é mais complexo. Ele utiliza mais tipos de elementos HTML (parágrafos, listas não ordenadas, quebras de linha, linhas horizontais, hiperlinks, imagens, etc.) e também inclui alguma quantidade de scripts (usados ​​para definir cookies).

O IronPDF é capaz de renderizar conteúdo da web muito mais complexo do que o que temos usado até agora. Para demonstrar isso, vejamos a seguinte página:

Um artigo escrito sobre o Puppeteer, uma biblioteca Node popularizada por sua capacidade de controlar o Chrome programaticamente usando uma instância de navegador sem interface gráfica.

A página mostrada acima é de um artigo escrito sobre a biblioteca Puppeteer Node. O Puppeteer executa sessões de navegador sem interface gráfica que os desenvolvedores Node utilizam para automatizar diversas tarefas do navegador no lado do servidor ou no lado do cliente (uma das quais inclui a geração de PDFs em HTML no lado do servidor).

A nova página utiliza diversos recursos (arquivos CSS, imagens, arquivos de script, etc.) e um layout ainda mais complexo. Neste próximo exemplo, converteremos uma cópia salva desta página (juntamente com seus arquivos de origem) em um PDF com qualidade de imagem perfeita.

O trecho de código abaixo pressupõe que a página esteja salva no mesmo diretório do nosso projeto com o nome "sample4.html":

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

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

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

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

A imagem a seguir mostra os resultados do trecho de código acima.

Se o conteúdo ficar bom no Google Chrome, também ficará bom quando convertido para PDF. Isso inclui designs de página que utilizam muito CSS e JavaScript.

Criar um arquivo PDF a partir de um URL

O IronPDF consegue converter strings HTML e arquivos HTML de qualquer tamanho e complexidade. Você não está limitado a usar apenas a marcação bruta de strings e arquivos, no entanto. O IronPDF também pode solicitar HTML a partir de uma URL.

Considere o artigo da Wikipédia localizado em https://en.wikipedia.org/wiki/PDF .

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

Use este código-fonte para converter este artigo da Wikipédia em um PDF:

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

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

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

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

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

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

Acima, usamos PdfDocument.fromUrl para converter a página da web em um PDF com poucas linhas de código. O IronPDF irá obter o código HTML do endereço web para você e renderizá-lo perfeitamente. Não são necessários arquivos HTML nem sequências de texto!

 O PDF gerado pela chamada PdfDocument.fromUrl em um artigo da Wikipédia. Observe as semelhanças com a página web original.

Criar um arquivo PDF a partir de um arquivo ZIP

Use PdfDocument.fromZip para converter um arquivo HTML específico localizado em um arquivo compactado (zip) em um PDF.

Por exemplo, vamos supor que temos um arquivo Zip no diretório do projeto com a seguinte estrutura interna:

html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

O arquivo index.html contém o código:

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

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

O arquivo style.css declara cinco regras 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;
}

Por fim, o arquivo logo.png apresenta o logotipo do nosso produto:

A imagem de exemplo dentro de um hipotético arquivo zip HTML.

Ao chamar o método fromZip, especifique um caminho válido para o arquivo zip no primeiro argumento, juntamente com um objeto JSON que define a propriedade mainHtmlFile com o nome do arquivo HTML do arquivo zip que queremos converter.

Convertemos o arquivo index.html dentro da pasta zip da seguinte maneira:

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

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

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

// Render the HTML from a zip archive
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 a função PdfDocument.fromZip. Esta função renderiza com sucesso o código HTML contido no arquivo ZIP, incluindo seus recursos.

Personalize a saída da geração de PDFs

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

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Build a custom 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 a PDF from a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

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

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
  centerText: "https://www.adobe.com",
  dividerLine: true,
  font: AffixFonts.CourierNew,
  fontSize: 12,
  leftText: "URL to PDF"
};

// Build a custom 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 a PDF from a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

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

// Initialize render options with default settings
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
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
};

// Render a PDF from a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

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

// Initialize render options with default settings
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
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
};

// Render a PDF from a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

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

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

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

// Initialize render options with default settings
var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
  top: 50,
  bottom: 50,
  left: 60,
  right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("set-margins-and-page-size.pdf");
});

Gere PDFs a partir de páginas web dinâmicas

Para páginas da web que contêm conteúdo que não está imediatamente disponível e renderizado no carregamento da página, pode ser necessário pausar a renderização do conteúdo dessa página até que certas condições sejam satisfeitas.

Por exemplo, o desenvolvedor pode querer gerar um PDF contendo conteúdo que só aparece 15 segundos após o carregamento da página. Em outro caso, esse mesmo conteúdo pode aparecer somente após a execução de um código complexo do lado do cliente.

Para lidar com esses dois casos extremos (e muitos outros), a versão Node do IronPDF define o mecanismo WaitFor. Os desenvolvedores podem incluir essa propriedade em suas configurações ChromePdfRenderOptions para instruir o mecanismo de renderização do Chrome do IronPDF a converter o conteúdo de uma página quando determinados eventos ocorrerem.

O bloco de código a seguir configura o IronPDF para aguardar 20 segundos antes de capturar o conteúdo da nossa página inicial como um PDF:

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

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
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");
});

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

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
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");
});

O próximo bloco de código configura o IronPDF para aguardar até que um elemento em um editor de texto SEO popular possa ser selecionado com sucesso.

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

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
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");
});

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

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
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");
});