코드 예제: IronPDF 및 .NET 10을 사용한 반응형 페이지를 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 렌더링을 위한 뷰포트 예제를 살펴보세요