A Biblioteca PDF do Node.js

Explore IronPDF for Node.js Comece seu teste gratuito

HTML para PDF

Online Demo Veja todos os exemplos de código %s

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

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

AJUDA DO NODE

d3 NPM (Como funciona para desenvolvedores)

Curtis Chau

Updated: 21 de abril de 2026

A visualização de dados é um aspecto crucial do desenvolvimento web moderno, ajudando a transformar conjuntos de dados complexos em informações compreensíveis e acionáveis. Dentre as diversas ferramentas e bibliotecas disponíveis, o D3.js (Data-Driven Documents) se destaca há mais de uma década entre os profissionais de dados por sua abordagem poderosa e flexível na criação de gráficos dinâmicos e interativos. Você pode criar aplicativos de visualização de dados robustos, fáceis de manter e eficientes ao combinar D3.js com React, uma biblioteca JavaScript popular para construção de interfaces de usuário.

Este artigo irá orientá-lo na integração do D3.js com o React e como isso pode ajudar na visualização de dados. Além disso, vamos analisar a biblioteca IronPDF para geração de PDFs a partir de URLs de sites.

O que é D3.js?

D3.js é uma biblioteca JavaScript que atua como um bloco de construção fundamental para produzir visualizações gráficas dinâmicas e interativas baseadas em dados em navegadores da web. Ele usa HTML, SVG e CSS para dar vida aos dados por meio de vários tipos de gráficos e tabelas. O D3 fornece uma estrutura poderosa para vincular dados a um Modelo de Objeto de Documento (DOM) e aplicar transformações orientadas a dados ao documento, sendo usado como base em muitas bibliotecas de gráficos de nível superior.

O que é React?

React é uma biblioteca JavaScript de código aberto criada pelo Facebook. Permite aos desenvolvedores criar componentes de interface do usuário reutilizáveis, gerenciar o estado de forma eficiente e atualizar o DOM em resposta a mudanças nos dados.

Preparando seu ambiente

Certifique-se de que o Node.js e o npm estejam instalados em seu sistema. Caso contrário, você pode baixá-los e instalá-los no site oficial do Node.js

Passo 1: Criar um novo aplicativo React

Primeiro, crie um novo aplicativo React usando o Create React App, uma ferramenta que configura um novo projeto React com uma boa configuração padrão. Você pode usar os seguintes comandos no seu terminal para realizar isso:

npx create-react-app d3-react-app
cd d3-react-app

npx create-react-app d3-react-app
cd d3-react-app

SHELL

Passo 2: Instale o D3.js

Em seguida, instale o pacote npm D3.js através do seguinte comando:

npm install d3

npm install d3

SHELL

Criando um gráfico de barras simples

Para demonstrar como usar o D3.js com React, criaremos um gráfico de barras simples.

Passo 1: Configurar o componente

Crie um novo componente chamado BarChart.js na pasta src e use o seguinte código para o componente:

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// BarChart component
const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;

// src/BarChart.js
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// BarChart component
const BarChart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BarChart;

Text

Etapa 2: Utilize o componente

Agora, use o componente BarChart no seu arquivo App.js e passe alguns dados para ele.

// src/App.js
import React from 'react';
import BarChart from './BarChart';

const App = () => {
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;

// src/App.js
import React from 'react';
import BarChart from './BarChart';

const App = () => {
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  return (
    <div className="App">
      <h1>Bar Chart</h1>
      <BarChart data={data} />
    </div>
  );
};

export default App;

Text

Saída

d3 NPM (Como Funciona para Desenvolvedores): Figura 1 - Gráfico de barras gerado

Apresentando o IronPDF

d3 NPM (Como Funciona para Desenvolvedores): Figura 2 - Página do IronPDF

IronPDF é um pacote npm robusto projetado para facilitar a geração de PDFs em aplicações Node.js Isso possibilita uma flexibilidade incomparável na criação de documentos PDF a partir de conteúdo HTML, URLs ou arquivos PDF existentes. Seja para gerar faturas, relatórios ou outros documentos, o IronPDF simplifica o processo com sua API intuitiva e amplo conjunto de recursos.

Principais características do IronPDF

Conversão de HTML para PDF: Converta conteúdo HTML em documentos PDF sem esforço, ideal para gerar PDFs dinâmicos a partir de conteúdo da web.
Conversão de URL para PDF: Crie PDFs diretamente a partir de URLs, capturando o conteúdo de páginas da web e salvando-os como arquivos PDF programaticamente.
Manipulação de PDF: Combine, divida e manipule documentos PDF existentes com facilidade. O IronPDF permite adicionar páginas, dividir documentos e muito mais.
Segurança de PDF: Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais, protegendo seus documentos confidenciais contra acesso não autorizado.
Saída de alta qualidade: Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação, garantindo fidelidade ao conteúdo original.
Compatibilidade multiplataforma: O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.
Integração simples: Integre facilmente o IronPDF em seus aplicativos Node.js usando seu pacote npm. A API bem documentada facilita a incorporação de recursos de geração de PDF em seus projetos.

Seja para criar um aplicativo web, um script do lado do servidor ou uma ferramenta de linha de comando, o IronPDF permite que você crie documentos PDF de nível profissional de forma eficiente e confiável.

Pacote IronPDF e D3 npm: Geração de PDFs facilitada

Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando:

npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest d3charts-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

SHELL

Em seguida, navegue até o diretório do seu projeto:

cd d3charts-pdf

cd d3charts-pdf

SHELL

Por fim, instale os pacotes necessários:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add d3

SHELL

API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma API para ser chamada quando os usuários quiserem gerar PDFs. Crie um arquivo no caminho pages/api/pdf.js e adicione o conteúdo abaixo:

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    console.error('data PDF:', data);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}

JavaScript

O IronPDF requer uma chave de licença, que você pode obter na página de licença de avaliação e inserir no código acima.

Adicione o seguinte código para aceitar uma URL do usuário e, em seguida, gerar um PDF a partir da URL fornecida no arquivo index.js. O código também mostra como adicionar um gráfico gerado por D3 e uma API backend que aceitará a URL do usuário.

// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

export default function D3Demo() {
  const [text, setText] = useState("");
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <h1>Bar Chart</h1>
      <D3BarChart data={data} />
      <p>
        <span>Enter URL To Convert to PDF:</span>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{margin: 20, padding: 5}} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}

// index.js
"use client";
import React, { useState } from 'react';
import D3BarChart from './d3BarChart';
import styles from "../../styles/Home.module.css";

export default function D3Demo() {
  const [text, setText] = useState("");
  const data = [
    { name: 'A', value: 30 },
    { name: 'B', value: 80 },
    { name: 'C', value: 45 },
    { name: 'D', value: 60 },
    { name: 'E', value: 20 },
    { name: 'F', value: 90 },
    { name: 'G', value: 55 },
  ];

  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text, {
        method: "GET",
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <h1>Bar Chart</h1>
      <D3BarChart data={data} />
      <p>
        <span>Enter URL To Convert to PDF:</span>{" "}
        <input type="text" value={text} onChange={handleChange} />
      </p>
      <button style={{margin: 20, padding: 5}} onClick={generatePdf}>
        Generate PDF
      </button>
    </div>
  );
}

Text

Lembre-se de definir o componente D3BarChart:

// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
export default function D3BarChart({ data }) {
  const svgRef = useRef(); // ref svg element

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
}

// d3BarChart.js
"use client";
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

// D3BarChart component
export default function D3BarChart({ data }) {
  const svgRef = useRef(); // ref svg element

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const width = 500;
    const height = 300;
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    // Set up the SVG dimensions
    svg.attr('width', width).attr('height', height);

    // Define the x scale
    const x = d3.scaleBand()
      .domain(data.map(d => d.name))
      .range([margin.left, width - margin.right])
      .padding(0.1);

    // Define the y scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    // Define the x-axis
    const xAxis = g => g
      .attr('transform', `translate(0,${height - margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0));

    // Define the y-axis
    const yAxis = g => g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y))
      .call(g => g.select('.domain').remove());

    svg.append('g').call(xAxis);
    svg.append('g').call(yAxis);

    // Create bars
    svg.append('g')
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', d => x(d.name))
      .attr('y', d => y(d.value))
      .attr('height', d => y(0) - y(d.value))
      .attr('width', x.bandwidth())
      .attr('fill', 'steelblue');
  }, [data]);

  return <svg ref={svgRef}></svg>;
}

Text

Explicação do código:

Criamos um aplicativo Next.js e adicionamos os pacotes necessários, IronPDF e D3.
Em seguida, criamos o componente BarChart usando D3.
Adicione um campo de entrada e um botão para gerar o documento PDF.

Saídas

API:

d3 NPM (Como Funciona para Desenvolvedores): Figura 3 - Seção de entrada com o gráfico de barras D3

PDF gerado a partir deste URL do IronPDF :

d3 NPM (Como Funciona para Desenvolvedores): Figura 4 - PDF gerado a partir da URL fornecida pelo usuário

Licença IronPDF

d3 NPM (Como Funciona para Desenvolvedores): Figura 5 - Página de licença do IronPDF

A licença de avaliação do IronPDF permite que os usuários experimentem seus diversos recursos antes de comprá-la. Mais detalhes sobre o licenciamento perpétuo podem ser encontrados na página de Licenciamento do IronPDF .

Insira a chave de licença aqui:

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JavaScript

Conclusão

Ao combinar D3.js com React, você pode aproveitar os pontos fortes de ambas as bibliotecas para criar visualizações de dados poderosas e interativas. O React fornece uma estrutura robusta para a construção de interfaces de usuário, enquanto o D3.js oferece amplas capacidades para manipulação e visualização de dados. Utilizar o NPM para gerenciar dependências garante que seu projeto seja sustentável e escalável. Este exemplo de um gráfico de barras simples é apenas o começo; Com essas ferramentas, você pode criar uma ampla variedade de visualizações de dados sofisticadas e interativas, adaptadas às suas necessidades específicas.

Curtis Chau

Converse agora mesmo com a equipe de engenharia.

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.

...