IronPDF Blazor 서버 튜토리얼: C#을 사용하여 HTML을 PDF로 렌더링하기

Blazor 서버 프로젝트를 새로 만드는 방법은 무엇인가요?

새 프로젝트를 만들고 유형을 Blazor 서버 앱으로 선택하세요. Visual Studio는 .NET을 사용하여 PDF를 생성할 수 있는 서버 측 Blazor 애플리케이션을 빌드하기 위한 템플릿을 제공합니다. Blazor Server 호스팅 모델은 애플리케이션 로직을 서버에서 실행하므로 서버 측 처리가 필요한 PDF 생성 시나리오 에 적합합니다.

Blazor 프로젝트에 IronPDF를 설치하는 방법은 무엇인가요?

프로젝트를 생성한 후 다음 단계를 따라 Visual Studio의 NuGet에서 IronPDF 라이브러리를 설치하십시오. IronPDF는 HTML 문자열, URL 및 기존 PDF 문서에서 PDF를 생성하는 API를 제공합니다.

1. Visual Studio의 솔루션 탐색기 창에서 References를 마우스 오른쪽 버튼으로 클릭하고 Manage NuGet Packages를 선택합니다.
2. 찾아보기를 선택하고 IronPdf를 검색하세요.
3. 패키지의 최신 버전을 선택하고, 프로젝트 옆의 확인란을 선택한 다음, 설치를 클릭합니다.

또는 .NET CLI를 사용하여 설치할 수도 있습니다.

Install-Package IronPdf

특정 플랫폼을 대상으로 하는 프로젝트의 경우 플랫폼별 패키지가 필요할 수 있습니다. 예를 들어 Linux에 배포하는 경우 Linux 설치 가이드를 참조하십시오.

PDF 생성을 위한 새로운 Razor 컴포넌트를 어떻게 추가하나요?

IronPDF가 Blazor 프로젝트에 설치되면 새 Razor 컴포넌트를 추가하세요. 이 튜토리얼에서는 해당 파일의 이름을 "IronPdfComponent"로 지정하세요. 이 구성 요소는 사용자 입력을 처리하고 HTML 콘텐츠를 기반으로 PDF를 동적으로 생성합니다. Blazor의 컴포넌트 아키텍처를 사용하면 애플리케이션 전체에서 공유할 수 있는 재사용 가능한 PDF 생성 기능을 쉽게 만들 수 있습니다.

그 후, 코드를 다음과 같이 업데이트하십시오.

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

이 구성 요소는 PDF 생성을 위해 ChromePdfRenderer 클래스를 사용합니다. 용지 크기 , 여백 , 머리글/바닥글 등 다양한 옵션을 사용하여 렌더링을 사용자 지정할 수 있습니다.

Blazor 애플리케이션에서 IronPDF로 렌더링된 PDF를 다운로드할 수 있도록 하려면 다음 JavaScript 코드를 _layout.cshtml에 추가하세요.

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

공유 폴더에 있는 NavMenu.razor 파일을 편집하여 새 Razor 구성 요소로 이동하는 탐색 탭을 추가하세요. 다음 코드를 추가하세요:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

이 모든 단계를 완료한 후 솔루션을 실행하면 다음과 같은 결과가 나타날 것입니다.

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });