C#에서 HTML을 PDF로 변환하여 픽셀 단위까지 완벽한 PDF 만들기
IronPDF 개발사로서 저희는 IronPDF 로 생성된 PDF 문서가 완벽해 보일 뿐만 아니라 고객이 기대하는 모습 그대로여야 한다는 점을 잘 알고 있습니다. PDF 파일을 픽셀 단위로 완벽하게 보이게 하려면 훌륭한 HTML 템플릿을 개발하거나 웹 개발자에게 의뢰해야 합니다. IronPDF PDF를 HTML에 픽셀 단위로 완벽하게 렌더링하고 Chrome 렌더러 덕분에 Chrome에서 보이는 것과 동일하게 표시되도록 하는 옵션을 제공합니다.
빠른 시작: IronPDF로 HTML을 PDF로 변환하여 픽셀 단위까지 완벽한 PDF 만들기
IronPDF의 강력한 Chrome 렌더러를 사용하여 HTML을 픽셀 단위까지 완벽한 PDF로 손쉽게 변환하세요. 이 간편 가이드는 IronPDF의 HTML5, CSS3 및 JavaScript 에 대한 완벽한 지원을 활용하여 정확하고 예측 가능한 PDF 출력을 얻는 데 도움이 됩니다. 단 몇 줄의 코드로 HTML 콘텐츠를 Chrome에서 보이는 그대로 렌더링하여 웹에서 PDF로의 원활한 전환을 보장할 수 있습니다. 레이아웃 정확도를 유지하면서도 사용 편의성을 저해하지 않으려는 개발자에게 적합합니다.
-
NuGet 패키지 관리자를 사용하여 https://www.nuget.org/packages/IronPdf 설치하기
PM > Install-Package IronPdf -
다음 코드 조각을 복사하여 실행하세요.
var Renderer = new IronPdf.ChromePdfRenderer(); Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf"); -
실제 운영 환경에서 테스트할 수 있도록 배포하세요.
무료 체험판으로 오늘 프로젝트에서 IronPDF 사용 시작하기
IronPDF의 Chrome 렌더러란 무엇입니까?
이것이 IronPDF 다른 .NET PDF 라이브러리와 차별화하는 요소입니다.
IronPDF Google Chromium 렌더러를 사용한다는 점에서 시장에서 차별화됩니다. 즉, Chrome 브라우저에서 보이는 HTML이 IronPDF PDF에서 보이는 것과 완전히 동일하게 표시됩니다. 이 튜토리얼에서는 이를 달성하기 위해 Chrome과 IronPDF 에 적용해야 하는 몇 가지 설정을 안내해 드리겠습니다.
분명히 말씀드리자면, 경쟁업체들이 구현했다고 주장하는 많은 "HTML을 PDF로 변환" 기술은 W3C 표준을 준수하지 않거나 HTML5, CSS3 또는 JavaScript 지원하지 않으며, wkhtmltopdf 와 같은 기본 렌더러를 사용합니다.
IronPDF 와 경쟁사 비교
다른 제품과의 비교 목록 전체를 보려면 블로그를 참조하세요.
[p 특징] | IronPDF의 Chrome 렌더러 |Aspose vs IronPDF|iText vs IronPDF
IronPDF의 최적화된 Chrome 렌더러는 Chrome보다 성능이 뛰어납니다.
IronPDF Chrome 자체를 능가하는 두 가지 사례입니다. Chrome에서 두 페이지로 분할되는 버튼과 텍스트가 IronPDF 에서는 그대로 유지됩니다.
Chrome에서 버튼과 텍스트가 잘리는 현상의 예시
Chrome에서 텍스트가 잘리는 또 다른 예
HTML을 PDF로 변환할 때 왜 이 방법을 사용해야 할까요?
개발자들은 HTML을 PDF로 변환하는 기능을 선호하는데, 그 이유는 기존 웹 브랜딩과 일치하는 예측 가능한 결과를 제공하기 때문입니다. 디자인은 문서화가 잘 되어 있고 표준화된 HTML, CSS 및 JavaScript 기술을 사용하여 구현됩니다.
- 출력물의 레이아웃과 디자인이 웹사이트와 완전히 일치합니다.
- 웹 개발자는 완벽한 정확성을 가지고 디자인에 집중할 수 있습니다.
- .NET 개발자는 레이아웃보다는 애플리케이션 로직에 집중할 수 있습니다. 백엔드 개발자는 레이아웃 및 디자인 작업을 웹 디자이너에게 위임할 수 있습니다.
1. CSS 미디어 유형을 인쇄 또는 화면으로 선택할지 결정합니다.
IronPDF의 렌더러에는 두 가지 미디어 렌더링 옵션이 있습니다: 인쇄 (기본) 및 화면. 화면 인쇄와 실제 인쇄를 시각적으로 비교하려면 이 튜토리얼의 마지막 부분인 "화면 인쇄와 실제 인쇄 예시 비교" 섹션을 참조하십시오.
CssMediaType.인쇄은(는) 일반 프린터 사용을 위한 HTML 최적화 기본 렌더링 옵션입니다. 이는 페이지의 일부 배경 이미지, 아이콘 및 기타 잉크 사용량이 많은 요소가 다르게 표시되거나 생략될 수 있음을 의미합니다. 이 옵션은 배경 이미지가 없는 문서에 적합하며 기본 인쇄 미리보기 옵션입니다.CssMediaType.화면은(는) 화면에서 Chrome과 동일한 모습으로 PDF가 보이도록 하는 렌더링 옵션입니다. HTML 디버깅을 위해 IronPDF 렌더링하는 방식과 정확히 일치하는 인쇄 미리보기를 활성화하려면 Chrome 브라우저에서 몇 가지 옵션을 설정해야 합니다.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen반복되는 테이블 헤더
HTML에 여러 페이지에 걸쳐 있는 표가 포함되어 있는 경우, 표 머리글이 각 PDF 페이지에 반복되도록 하는 것이 좋습니다.
- 이 경우,
인쇄CssMediaType만 사용할 수 있습니다. 화면을(를) 사용하면 Chrome이 헤더를 한 번만 인쇄하도록 지시합니다.
화면과 인쇄 예시 비교
화면 모드에서는 로드되는 많은 이미지와 아이콘이 인쇄 모드에서는 로드되지 않습니다.
2. Chrome 설정
IronPDF Chrome 렌더링 엔진을 사용합니다. 다음 단계를 따르면 IronPDF Chrome에서 보이는 것과 똑같이 HTML을 렌더링할 수 있습니다. 이를 위해 Chrome에서 사전에 수행해야 하는 몇 가지 단계는 다음과 같습니다.
인쇄 형식에서 일반적으로 생략되는 모든 이미지, 아이콘 및 배경이 포함된 픽셀 완벽 PDF를 렌더링하려면 화면 CSS 미디어 옵션을 사용하십시오.
2a. Chrome 개발자 도구를 열고 "CSS 미디어 에뮬레이션 활성화"를 "화면/인쇄"로 설정하세요.
-
이렇게 하려면 Chrome에서 개발자 도구를 엽니다 .
- Command+Shift+P(Mac) 또는 Control+Shift+P(Windows, Linux, ChromeOS)를 눌러 명령 메뉴를 엽니다. 렌더링 입력을 시작하고, '렌더링 표시'를 선택한 다음 Enter 키를 누르십시오. 개발자 도구는 개발자 도구 창 하단에 렌더링 탭을 표시합니다. 더 많은 도움말
- 아래로 이동하여
Emulate CSS media드롭다운을 찾고 옵션화면또는인쇄을(를) 선택하십시오. 웹페이지를 보고 있는 경우, 설정이 적용되려면 페이지를 새로고침(Ctrl+R)해야 할 수 있습니다.
인쇄
화면
2b. 인쇄 미리 보기 창을 엽니다(Windows에서는 Ctrl+P).
정확한 출력을 얻으려면 용지 크기를 변경하고 Chrome 인쇄 대화 상자에서 '배경 이미지 인쇄'를 활성화해야 할 수 있습니다.
2c. 올바른 인쇄 미리보기 설정을 지정하세요.
A4또는Letter와 같은 IronPDF 프로젝트에서 사용하는 용지 크기를 선택하십시오.Margins드롭다운에서Custom을(를) 선택하고 네 면 모두 1인치(1") 여백으로 설정하십시오.Background Graphics확인란을 활성화하십시오.- 가로형 문서를 출력할 계획이라면
Layout을(를)Landscape으로(로) 설정하십시오.
그게 전부입니다. 이제 HTML을 디버깅하고 인쇄 미리보기를 사용하여 IronPDF 레이아웃을 어떻게 렌더링하는지 정확하게 확인할 수 있습니다.
3. IronPDF 설치합니다.
3a. IronPDF 에서 CSS 미디어 유형을 설정하세요
웹페이지 디자인과 100% 정확하게 일치시키려면 코드에서 Chrome에 설정한 것과 동일한 CSS 미디어 유형을 선택해야 합니다.
기본 설정이 더 많은 잉크를 절약하도록 프린터용으로 설계된 PdfCssMediaType.인쇄 형식에서 제외될 수 있는 배경과 큰 이미지가 포함된 PdfCssMediaType.화면을 포함한다는 점을 기억하십시오.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True3b. 렌더링 지연 및 렌더링 시간 초과를 적절하게 설정하십시오.
IronPDF의 기본 렌더링 시간 제한은 60초입니다. 이보다 처리 시간이 오래 걸리는 모든 항목은 렌더링 옵션을 수정하지 않으면 렌더링되지 않습니다. 기본 설정을 무시하려면 RenderingOptions.Timeout 옵션을 조정해야 합니다.
타임아웃이 설정되지 않았거나 렌더링 지연 시간이 설정된 타임아웃보다 길면 Unable to Render PDF 예외가 발생합니다. 따라서 이 오류가 발생하는 경우 해당 값을 늘려야 할 수도 있습니다.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds- RenderDelay와 JavaScript (코드 예제)
- 렌더링 지연 (API 참조)
- 타임아웃 (API 참조)
당신이 할 수 있는 다른 일들을 알아볼 준비가 되셨나요? 여기 튜토리얼 페이지를 확인해 보세요: 추가 기능
자주 묻는 질문
HTML에서 픽셀 단위로 정확한 PDF 렌더링을 구현하려면 어떻게 해야 할까요?
HTML에서 픽셀 단위로 완벽한 PDF 렌더링을 구현하려면 IronPDF의 Chrome Renderer를 사용할 수 있습니다. 이 렌더러는 Chrome 브라우저에 표시되는 HTML 콘텐츠가 생성된 PDF와 동일하도록 보장합니다.
IronPDF 사용하여 HTML을 PDF로 변환할 때의 장점은 무엇인가요?
IronPDF 다른 많은 라이브러리와 달리 HTML5, CSS3 및 JavaScript 지원하여 개발자가 웹 브라우저에서 HTML 콘텐츠의 시각적 모양과 일치하는 PDF를 생성할 수 있도록 합니다.
IronPDF 에서 CSS 미디어 유형을 어떻게 설정할 수 있나요?
IronPDF 에서 CSS 미디어 유형을 구성하려면 배경이 없는 문서를 인쇄하려면 '인쇄'를 선택하고 화면 모양과 일치하도록 하려면 '화면'을 선택하여 PDF 출력이 요구 사항에 맞게 조정되도록 할 수 있습니다.
Chrome에서 PDF 렌더링을 설정하려면 어떤 단계를 따라야 하나요?
Chrome에서 PDF 렌더링을 설정하려면 개발자 도구를 열고 'CSS 미디어 에뮬레이션'을 '화면/인쇄'로 설정한 다음 인쇄 미리 보기 설정을 조정하여 PDF가 원하는 레이아웃과 일치하는지 확인하십시오.
IronPDF 에서 렌더링 문제가 발생하면 어떻게 해결해야 하나요?
'PDF를 렌더링할 수 없습니다' 예외와 같은 렌더링 문제가 발생하는 경우, IronPDF 옵션에서 렌더링 지연 또는 렌더링 시간 초과 설정을 늘려보세요.
IronPDF 사용하면 웹 디자인과 일치하는 PDF를 생성할 수 있나요?
네, IronPDF Google Chromium 렌더러를 사용하여 웹 디자인과 정확히 일치하는 PDF를 렌더링할 수 있도록 지원하며, 모든 최신 웹 기술을 지원합니다.
IronPDF 왜 Google Chromium 렌더러를 사용하나요?
IronPDF Google Chromium 렌더러를 사용하여 Chrome 브라우저에 표시되는 HTML이 생성된 PDF와 동일하게 보이도록 함으로써 일관되고 고품질의 출력을 제공합니다.
IronPDF .NET 10과 호환되나요? 그리고 새로운 .NET 10 프로젝트에서 사용할 수 있나요?
네. IronPDF .NET 10을 명시적으로 지원하며( .NET 9, .NET 8 및 이전 버전도 지원), 별도의 설정 없이 바로 사용할 수 있습니다. 프로젝트에서 .NET 10을 대상으로 지정하고 IronPDF의 HTML-PDF 변환, 렌더링, 편집 및 서명 API를 특별한 해결 방법 없이 사용할 수 있습니다.
아직도 스크롤하고 계신가요?
빠른 증거를 원하시나요? PM > Install-Package IronPdf
샘플을 실행하세요 HTML이 PDF로 변환되는 것을 지켜보세요.
무료로 시작하세요
무료로 시작하세요
무료 라이브 데모 예약하기
신용카드나 계정 생성은 필요하지 않습니다.
