C#을 사용하여 Blazor Server에서 Razor 파일을 PDF로 변환

어떤 모델 클래스 구조를 사용해야 할까요?

PersonInfo 라는 이름의 표준 C# 클래스를 추가합니다. 이 클래스는 개인 정보를 저장하기 위한 모델 역할을 합니다. 다음 코드를 삽입하세요:

:path=/static-assets/pdf/content-code-examples/how-to/razor-to-pdf-blazor-server-model.cs

namespace BlazorSample.Data
{
    public class PersonInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

이 모델은 Razor 컴포넌트에 전달되어 PDF에 렌더링되는 데이터 구조를 나타냅니다. IronPDF는 간단한 POCO부터 복잡한 엔티티 프레임워크 모델에 이르기까지 모든 C# 객체 모델과 호환됩니다. PDF 생성 모델을 설계할 때는 최종 문서에 데이터가 어떻게 표시될지 고려하고 그에 따라 속성을 구성해야 합니다.

Razor 컴포넌트를 사용하여 PDF를 생성하는 방법은 무엇인가요?

Razor 컴포넌트를 PDF로 변환하려면 RenderRazorComponentToPdf 메서드를 사용하십시오. ChromePdfRenderer 클래스를 인스턴스화하여 이 메서드에 접근하세요. 이 메서드는 내보내기 또는 추가 수정을 위해 PdfDocument 객체를 반환합니다.

반환된 PdfDocument는 PDF/A 또는 PDF/UA 형식으로 변환하는 것을 포함한 추가 수정 기능을 지원합니다. 문서를 병합하거나 분할하고 , 페이지를 회전하고, 주석 이나 책갈피를 추가할 수 있습니다. 필요에 따라 사용자 지정 워터마크를 적용하세요.

Person.razor 라는 이름의 Razor 컴포넌트를 추가합니다. 다음 코드를 입력하세요:

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;

<h3>Person</h3>

@code {
    // A parameter to receive a list of persons from the parent component.
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }

    // Dictionary to hold parameters that will be passed to the PDF renderer.
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        // Initialize the persons list with some sample data.
        persons = new List<PersonInfo>
        {
            new PersonInfo { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new PersonInfo { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new PersonInfo { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
        };
    }

    private async void PrintToPdf()
    {
        ChromePdfRenderer renderer = new ChromePdfRenderer();

        // Apply text footer to the PDF pages.
        renderer.RenderingOptions.TextFooter = new TextHeaderFooter()
        {
            LeftText = "{date} - {time}",
            DrawDividerLine = true,
            RightText = "Page {page} of {total-pages}",
            Font = IronSoftware.Drawing.FontTypes.Arial,
            FontSize = 11
        };

        Parameters.Add("persons", persons);

        // Render Razor component to PDF and save it.
        PdfDocument pdf = renderer.RenderRazorComponentToPdf<Person>(Parameters);
        File.WriteAllBytes("razorComponentToPdf.pdf", pdf.BinaryData);
    }
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in persons)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<button class="btn btn-primary" @onclick="PrintToPdf">Print to Pdf</button>

이 방법을 사용하면 모든 RenderingOptions 기능에 액세스할 수 있습니다. 텍스트와 HTML 머리글 및 바닥글을 추가하고, 페이지 번호를 포함하며, 페이지 크기와 레이아웃을 조정합니다. RenderingOptions는 사용자 지정 여백 , 반응형 디자인을 위한 뷰포트 설정, 동적 콘텐츠에 대한 JavaScript 실행 지연을 지원합니다.

복잡한 레이아웃이나 Bootstrap과 같은 CSS 프레임워크를 사용하는 경우, 다양한 페이지 크기에서 PDF가 올바르게 표시되도록 반응형 CSS 렌더링 기능을 살펴보세요.

Razor 컴포넌트에 내비게이션 기능을 추가하려면 어떻게 해야 하나요?

• "공유 폴더"로 이동하여 NavMenu.razor를 엽니다. Razor 컴포넌트를 열 수 있는 섹션을 추가하세요. Person. 저희 Person 컴포넌트가 두 번째 옵션이 될 것입니다.

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Person">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Person
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

이 탐색 설정은 Blazor의 라우팅 시스템과 통합되어 사용자가 애플리케이션의 기본 탐색 메뉴에서 PDF 생성 기능에 액세스할 수 있도록 합니다. NavLink 구성 요소는 활성 경로를 올바르게 강조 표시합니다.

PDF 생성 과정은 어떻게 진행되나요?

프로젝트를 실행하고 PDF 문서를 생성하세요. "PDF로 인쇄" 버튼을 클릭하세요. IronPDF는 Razor 컴포넌트를 처리하고 HTML로 변환한 다음, Chrome 기반 렌더링 엔진을 사용하여 PDF로 렌더링합니다. 이를 통해 최신 웹 브라우저에서와 동일한 시각적 품질을 유지합니다.

생성된 PDF 파일은 프로젝트의 출력 디렉토리에 저장됩니다. 저장 위치를 사용자 지정하거나, 브라우저에서 직접 다운로드할 수 있도록 하거나, Azure Blob Storage와 같은 클라우드 스토리지에 PDF를 저장할 수 있습니다. 실제 운영 환경에서는 PDF 생성이 실패하거나 예상 소요 시간을 초과하는 상황에 대비하여 오류 처리 및 사용자 피드백 기능을 구현해야 합니다.