1. IronPDF
  2. 문제 해결
  3. 픽셀 단위까지 완벽한 HTML 서식

IronPDF 에서 픽셀 단위로 완벽한 HTML 서식 지정

커티스 차우
커티스 차우
업데이트됨:
This article was translated from English: Does it need improvement?
Translated
View the article in English

PDF 파일을 완벽하게 보이게 하려면 훌륭한 HTML 템플릿을 개발하거나 웹 개발자에게 의뢰해야 합니다. 이 문제 해결 관련 글은 HTML 디버깅에 대한 전체 튜토리얼 에서 발췌한 내용입니다.

1. HTML 디버깅 및 테스트

Chrome이나 이와 유사한 데스크톱 브라우저에서 HTML, CSS 및 JS를 디버깅할 수 있습니다. 그런 다음, 완벽하게 작동하는 것을 확인한 후 IronPDF 에 연결하면 Chrome에서 보이는 것과 똑같이 보일 것입니다.

기본 사용법

이 코드 예제는 최신 Chrome 데스크톱 브라우저에서 픽셀 단위로 완벽하게 렌더링되는 PDF 파일을 생성합니다.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

고급 HTML 개발

고급 Chrome 사용자 개발자는 IronPDF의 기본 설정을 사용하고 ' CSS 미디어 에뮬레이션 > 화면 '을 활성화하면 100% 정확도를 달성할 수 있습니다. 더 자세한 정보는 여기에서 확인할 수 있습니다.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. 결과를 비교하세요

결과를 비교하려면 Chrome 데스크톱 웹 브라우저에서 HTML 파일을 여세요.

참고: 모든 HTML 문자열과 에셋은 별도의 HTML 파일로 내보내어 직접 편집하거나 웹 개발자에게 도움을 요청하세요.

PDF 결과 비교

3. 인쇄 미리 보기 창을 엽니다(Windows에서는 Ctrl+P).

Chrome 인쇄 대화 상자에서 용지 크기를 변경하고 배경 이미지 인쇄를 활성화해야 할 수도 있습니다.

인쇄 미리보기 창

4. 'PDF로 저장' 옵션을 선택합니다.

Chrome에서 PDF로 인쇄하는 기능이 완벽해지면 IronPDF 그에 맞춰 완벽하게 작동합니다.

PDF로 저장 옵션

5. IronPDF 실행합니다.

이제 HTML이 완벽해졌으니 IronPDF 에 넣어서 실행하면 똑같이 보일 겁니다. 고객 데이터를 병합하려면 {PlaceHolders}을 사용하세요. IronPDF Examples 에 있는 코드 예제들이 정말 도움이 될 거예요!

이 튜토리얼이 문제를 해결하는 데 도움이 되지 않는다면 엔지니어링 지원팀에 문의해 주세요. 저희는 고객님을 더욱 효과적으로 지원할 수 있도록 문서를 개선하고 보완하겠습니다.

커티스 차우
커티스 차우
  지금 바로 엔지니어링 팀과 채팅하세요
기술 문서 작성자

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

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

시작할 준비 되셨나요?
Nuget 다운로드 18,318,263 | 버전: 2026.4 방금 출시되었습니다
Still Scrolling Icon

아직도 스크롤하고 계신가요?

빠른 증거를 원하시나요? PM > Install-Package IronPdf
샘플을 실행하세요 HTML이 PDF로 변환되는 것을 지켜보세요.