반응형 HTML을 PDF로 변환

import {PdfDocument, CssMediaType, FitToPaperModes} from "@ironsoftware/ironpdf";

(async () => {
    const options = {
        // Choose Screen or Print CSS media
        cssMediaType: CssMediaType.Screen,
        
        // Set paper mode to automatic fit to physical paper
        fitToPaperMode: FitToPaperModes.FitToPage,
    };

    // Render an HTML file
const pdf = await PdfDocument.fromHtml("Responsive.html", {renderOptions: options});

await pdf.saveAs("pdf-from-html.pdf");
})();

반응형 HTML을 PDF로 변환

뷰포트 설정 측면에서 CSS 미디어 모드와 페이퍼 모드가 있습니다.

IronPDF 의 CSS 미디어 옵션을 사용하면 HTML 콘텐츠를 PDF 문서로 렌더링할 때 스타일을 적용하는 방법을 지정할 수 있습니다. 이 옵션에 대한 두 가지 값은 CSS 미디어 "화면"과 "인쇄"입니다.

화면 : CSS 규칙이 화면에 표시되도록 의도되었음을 나타냅니다. 스타일은 디지털 화면에 최적화되어 있으며, 일반적으로 컴퓨터 모니터에서 보기 좋게 보이는 색상 및 레이아웃과 같은 사항을 고려합니다.
인쇄 : 브라우저에 인쇄 문서에 맞춘 스타일을 적용하도록 지시합니다. 즉, CSS 규칙은 인쇄에 최적화되어 있어 HTML 콘텐츠가 종이와 같은 물리적 매체에 인쇄될 때 가독성과 올바른 서식을 보장합니다.

IronPDF의 용지 크기 조정 옵션 에 있는 용지 모드 옵션은 렌더링된 콘텐츠가 PDF 페이지에 어떻게 맞춰질지를 결정합니다. 이 옵션에는 여러 가지 값이 있습니다.

ContinuousFeed: 이 모드는 내용이 롤 형태의 용지에 인쇄되는 연속 공급 프린터에 적합합니다. 이는 주로 산업 현장과 같은 특수 인쇄에 사용됩니다.
FitToHeight: 이 모드에서는 내용의 가로세로 비율을 유지하면서 지정된 용지 높이에 맞춰서 내용이 스케일됩니다. 이렇게 하면 콘텐츠가 넘치지 않고 전체 내용이 표시됩니다.
FitToWidth: 이 모드에서는 내용의 가로세로 비율을 유지하면서 지정된 용지 너비에 맞춰서 내용이 스케일됩니다. 이는 콘텐츠가 특정 너비 제한 내에 맞도록 하려는 경우에 유용합니다.
FitToPage: 이 모드에서는 내용의 가로세로 비율을 유지하면서 용지의 높이와 너비 모두에 맞춰서 내용이 스케일됩니다. 이를 통해 전체 콘텐츠가 한 페이지에 담기도록 합니다.

반응형 PDF 렌더링을 위한 뷰포트 예제를 살펴보세요