IRONSOFTWAREHOME
HTML 렌더링 설정
import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";

(async () => {
    // Many rendering options to use to customize!
    const options = {
        paperSize: {
            unit: PaperSizeUnit.Inch,
            width: 12.5,
            height: 20,
        },
        printHtmlBackgrounds: true,
        paperOrientation: PdfPaperOrientation.Landscape,
        title: "My PDF Document Name",
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 50, // in milliseconds
        },
        cssMediaType: CssMediaType.Screen,
        fitToPaperMode: FitToPaperModes.FitToPage,
        createPdfFormsFromHtml: true,

        // Supports margin customization
        margin: {
            top: 40, // millimeters
            left: 20, // millimeters
            right: 20, // millimeters
            bottom: 40, // millimeters
        },

        // Can set FirstPageNumber if you have a cover page
        firstPageNumber: 1, // use 2 if a cover page will be appended
    };

    // Render HTML page to PDF
    const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
    
    // Save the PDF
    await pdf.saveAs("my-content.pdf");
})();
npm i @ironsoftware/ironpdf
HTML 렌더링 설정

HTML 렌더링 설정

HTML 문자열, 파일 또는 웹 URL에서 렌더링할 때 다양한 렌더링 옵션을 구성할 수 있습니다. 위에 표시된 설정에는 구성 가능한 측정 단위를 사용하는 사용자 지정 용지 크기, HTML 배경 활성화, 페이지 방향, 문서 제목, 렌더링 프로세스 지연, CSS 미디어 유형 지정, 용지 모드 선택, 편집 가능한 양식 필드 생성, 여백 사용자 지정 및 페이지 번호 추가가 포함됩니다.

CSS 미디어 유형인 "screen"과 "print"는 표시 또는 출력 매체에 따라 HTML 문서에 스타일을 적용하는 방법을 지정하는 데 사용되는 지시어입니다. 미디어 유형으로 "화면"을 선택하면 CSS 규칙이 화면 보기용으로 설계되었으며, 색상 및 레이아웃과 같은 요소를 디지털 화면에 최적화한다는 것을 나타냅니다. 반대로 "인쇄"를 선택하면 브라우저는 인쇄 문서에 최적화된 스타일을 적용하여 HTML 콘텐츠가 물리적 매체에 인쇄될 때 가독성과 올바른 서식을 보장합니다. 특정 배경 이미지를 표시하기 위해 CSS 미디어 유형을 "screen"으로 설정해야 하는 경우가 있습니다.

렌더링 과정의 지연은 주로 JavaScript 나 글꼴이 로드될 수 있는 충분한 시간을 제공하기 위한 것입니다.

설명:

  • HTML 구조: 코드는 표준 HTML5 형식으로 <head><body> 섹션으로 구조화되어 있습니다.
  • 메타데이터: <meta> 태그는 반응형 디자인을 위한 문자 집합과 viewport를 정의합니다.

스타일시트:

  • 기본 본문 스타일: 모든 미디어에 적용되는 글꼴 종류와 여백을 설정합니다.
  • 화면 미디어 쿼리: 디지털 화면에는 밝은 회색 배경과 어두운 색상의 텍스트를 적용합니다.
  • PRINT 미디어 쿼리: 인쇄 시 일반적으로 사용되는 흰색 배경과 검은색 텍스트를 적용합니다.

사용 예시: 제공된 HTML 및 CSS 구조는 콘텐츠가 화면에서 표시되는지 아니면 PRINT되는지에 따라 서로 다른 스타일이 어떻게 적용될 수 있는지 보여줍니다.

GitHub 에서 더 많은 PDF 생성 설정 예제를 확인하세요.
GitHub에서 보기

시작할 준비 되셨나요?

버전:2026.6방금 출시

Key in blue circle

무료 30일 체험 키를 즉시 받으세요.

Your trial license will be sent to your email address

제한 없음. 100% 무제한 이용. 신용카드 불필요.

bullet_checked신용카드나 계정 생성은 필요하지 않습니다.제한 없음. 100% 무제한 이용. 신용카드 불필요.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
무료 라이브 데모를 예약하세요
Booking Badge

전 세계 수백만 엔지니어들이 신뢰하는 제품입니다.

Iron Software의 고객 로고
부담 없는 무료 상담을 받아보세요
아래 양식을 작성하시거나 sales@ironsoftware.com으로 이메일을 보내주세요.
고객님의 정보는 항상 비밀로 유지됩니다.
전 세계 수백만 엔지니어들이 신뢰하는 제품입니다.
Iron Software의 고객 로고
지금 바로 30일 무료 체험판 키를 받으세요.
신용카드나 계정 생성은 필요하지 않습니다.