Node.js PDF 라이브러리

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

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

노드 도움말

d3 NPM (개발자를 위한 작동 방식)

Curtis Chau

Updated: 2026년 4월 21일

데이터 시각화는 현대 웹 개발에서 매우 중요한 요소로, 복잡한 데이터 세트를 이해하기 쉽고 실행 가능한 통찰력으로 변환하는 데 도움을 줍니다. 다양한 도구와 라이브러리 중에서 D3.js (Data-Driven Documents)는 10년 이상 데이터 전문가들 사이에서 동적이고 상호작용적인 그래프를 생성하는 강력하고 유연한 접근 방식으로 두각을 나타내고 있습니다. 인기 있는 사용자 인터페이스 구축용 JavaScript 라이브러리인 React와 D3.js를 결합하면 견고하고 유지 관리하기 쉬우며 효율적인 데이터 시각화 애플리케이션을 만들 수 있습니다.

이 글에서는 D3.js를 React와 통합하는 방법과 이를 통해 데이터를 시각화하는 방법을 안내합니다. 또한, 웹사이트 URL에서 PDF를 생성하기 위해 IronPDF PDF 생성 라이브러리에 대해서도 살펴보겠습니다.

D3.js란 무엇인가요?

D3.js 는 웹 브라우저에서 동적이고 상호작용적인 데이터 기반 그래픽 시각화를 생성하기 위한 기본 구성 요소 역할을 하는 JavaScript 라이브러리입니다. D3는 HTML, SVG, CSS를 사용하여 다양한 유형의 차트와 그래프를 통해 데이터를 시각적으로 표현합니다. 또한, 데이터를 DOM(문서 객체 모델)에 바인딩하고 데이터 기반 변환을 문서에 적용하는 강력한 프레임워크를 제공하며, 많은 상위 수준 차트 라이브러리의 기반으로 사용됩니다.

React란 무엇인가요?

React는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리입니다. 이를 통해 개발자는 재사용 가능한 UI 구성 요소를 만들고, 상태를 효율적으로 관리하며, 데이터 변경에 따라 DOM을 업데이트할 수 있습니다.

환경 설정하기

Node.js 와 npm이 시스템에 설치되어 있는지 확인하세요. 그렇지 않다면 Node.js 공식 웹사이트 에서 다운로드하여 설치할 수 있습니다.

1단계: 새 React 애플리케이션 생성

먼저, Create React App이라는 도구를 사용하여 새로운 React 애플리케이션을 생성합니다. 이 도구는 적절한 기본 설정으로 새로운 React 프로젝트를 만들어 줍니다. 터미널에서 다음 명령어를 사용하여 이 작업을 수행할 수 있습니다.

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

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

SHELL

2단계: D3.js 설치

다음으로, 다음 명령어를 통해 D3.js npm 패키지를 설치하세요.

npm install d3

npm install d3

SHELL

간단한 막대 그래프 만들기

React에서 D3.js를 사용하는 방법을 보여주기 위해 간단한 막대 그래프를 만들어 보겠습니다.

1단계: 구성 요소 설정

새 구성 요소를 src 폴더에 BarChart.js이라는 이름으로 만들고, 아래의 코드를 구성 요소에 사용하십시오:

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

2단계: 구성 요소를 사용합니다.

이제 App.js 파일에서 BarChart 구성 요소를 사용하고, 여기에 일부 데이터를 전달하십시오.

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

산출

d3 NPM (개발자를 위한 작동 원리): 그림 1 - 출력된 막대 차트

IronPDF 소개합니다

d3 NPM (개발자를 위한 작동 원리): 그림 2 - IronPDF 웹페이지

IronPDF 는 Node.js 애플리케이션 내에서 PDF 생성을 용이하게 하도록 설계된 강력한 npm 패키지입니다. 이 기능을 통해 HTML 콘텐츠, URL 또는 기존 PDF 파일에서 PDF 문서를 생성할 때 비교할 수 없는 유연성을 누릴 수 있습니다. IronPDF 직관적인 API와 광범위한 기능 세트를 통해 송장, 보고서 또는 기타 문서를 생성하는 과정을 간소화합니다.

IronPDF 의 주요 기능

HTML을 PDF로 변환: HTML 콘텐츠를 PDF 문서로 손쉽게 변환할 수 있어 웹 콘텐츠에서 동적 PDF를 생성하는 데 이상적입니다.
URL을 PDF로 변환: URL에서 직접 PDF를 생성하여 웹 페이지의 콘텐츠를 캡처하고 프로그램 방식으로 PDF 파일로 저장합니다.
PDF 조작: 기존 PDF 문서를 손쉽게 병합, 분할 및 조작할 수 있습니다. IronPDF 사용하면 페이지를 추가하고, 문서를 분할하는 등의 작업을 수행할 수 있습니다.
PDF 보안: PDF 문서를 암호로 암호화하거나 디지털 서명을 적용하여 무단 접근으로부터 중요한 문서를 보호하세요.
고품질 출력: 텍스트, 이미지 및 서식을 정확하게 표현하여 원본 콘텐츠에 충실한 고품질 PDF 문서를 생성합니다.
크로스 플랫폼 호환성: IronPDF Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.
간편한 통합: IronPDF의 npm 패키지를 사용하여 Node.js 애플리케이션에 IronPDF 쉽게 통합할 수 있습니다. 잘 정리된 API 덕분에 프로젝트에 PDF 생성 기능을 손쉽게 통합할 수 있습니다.

웹 애플리케이션, 서버 측 스크립트 또는 명령줄 도구를 개발하든 IronPDF 사용하면 전문가 수준의 PDF 문서를 효율적이고 안정적으로 생성할 수 있습니다.

IronPDF 및 D3 npm 패키지: PDF 생성을 간편하게

필수 구성 요소 설치: 먼저 다음 명령어를 사용하여 새 Next.js 프로젝트를 생성합니다(아직 생성하지 않은 경우).

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

다음으로 프로젝트 디렉토리로 이동하세요.

cd d3charts-pdf

cd d3charts-pdf

SHELL

마지막으로 필요한 패키지를 설치하세요.

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

PDF 생성 API: 첫 번째 단계는 PDF 문서를 생성하는 백엔드 API를 만드는 것입니다. IronPDF 서버 측에서만 실행되므로 사용자가 PDF를 생성하고자 할 때 호출할 API를 만들어야 합니다. 경로 pages/api/pdf.js에 파일을 생성하고 아래 내용을 추가하십시오:

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

IronPDF 사용하려면 라이선스 키가 필요합니다. 라이선스 키는 평가판 라이선스 페이지 에서 발급받아 위의 코드에 붙여넣으면 됩니다.

사용자로부터 URL을 받기 위한 코드를 추가하고, 주어진 URL에서 PDF를 생성하여 index.js 파일에 저장하십시오. 이 코드는 또한 D3로 생성된 그래프와 사용자의 URL을 받는 백엔드 API를 추가하는 방법을 보여줍니다.

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

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

코드 설명:

Next.js 앱을 생성하고 필요한 패키지인 IronPDF 와 D3를 추가합니다.
그런 다음 D3를 사용하여 막대 차트 구성 요소를 생성합니다.
PDF 문서를 생성하는 입력란과 버튼을 추가합니다.

출력

API:

d3 NPM (개발자를 위한 작동 원리): 그림 3 - D3 막대 차트가 포함된 입력 섹션

이 내용을 바탕으로 생성된 PDF 파일 IronPDF URL :

d3 NPM (개발자를 위한 작동 원리): 그림 4 - 사용자가 제공한 URL로 생성된 PDF

IronPDF 라이선스

d3 NPM (개발자를 위한 작동 원리): 그림 5 - IronPDF 라이선스 페이지

IronPDF 평가판 라이선스를 사용하면 구매 전에 다양한 기능을 확인해 볼 수 있습니다. 영구 라이선스에 대한 자세한 내용은 IronPDF 라이선스 페이지에서 확인할 수 있습니다.

라이선스 키를 여기에 입력하세요:

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

결론

D3.js와 React를 결합하면 두 라이브러리의 장점을 활용하여 강력하고 상호작용적인 데이터 시각화를 만들 수 있습니다. React는 사용자 인터페이스 구축을 위한 강력한 프레임워크를 제공하며, D3.js는 데이터 조작 및 시각화를 위한 광범위한 기능을 제공합니다. NPM을 사용하여 종속성을 관리하면 프로젝트의 유지 관리성과 확장성을 확보할 수 있습니다. 이 간단한 막대 그래프 예시는 시작에 불과합니다. 이러한 도구를 사용하면 특정 요구 사항에 맞춰 다양하고 정교하며 상호 작용적인 데이터 시각화를 만들 수 있습니다.

Curtis Chau

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

...

더 읽어보기