IronPDF Blazor Server Eğitimi: HTML'yi C# ile PDF'e Dönüştürme

Yeni Bir Blazor Sunucu Projesi Nasıl Oluşturulur?

Yeni bir proje oluşturun ve Blazor Sunucu Uygulaması türünü seçin. Visual Studio, sunucu tarafı Blazor uygulamaları oluşturmaya yönelik bir şablon sunar ve bu şablon, PDF oluşturma için .NET kullanabilir. Blazor Sunucu barındırma modeli, uygulama mantığınızı sunucuda çalıştırır ve bu, sunucu tarafı işlem gerektiren PDF oluşturma senaryoları için uygundur.

IronPDF'yi Blazor Projemde Nasıl Kurarım?

Proje oluşturulduktan sonra Visual Studio'dan IronPDF kütüphanesini NuGet'ten yüklemek için bu adımları izleyin. IronPDF, HTML dizelerinden PDF oluşturma, URL'ler ve mevcut PDF belgeleri için bir API sağlar.

1. Visual Studio'da Çözüm Gezgini penceresinde, References öğesine sağ tıklayın ve Manage NuGet Packages seçin.
2. Gözat'ı seçin ve IronPdf için arama yapın.
3. Paketin en son sürümünü seçin, proje için işaret kutusunu işaretleyin ve kuruluma tıklayın.

Alternatif olarak, yüklemek için .NET CLI'yi kullanabilirsiniz:

Install-Package IronPdf

Belirli platformları hedefleyen projeler için platforma özel paketler gerekebilir. Örneğin, Linux'a dağıtırken, Linux kurulum kılavuzunu inceleyin.

PDF Oluşturma İçin Yeni Bir Razor Bileşeni Nasıl Eklerim?

IronPDF Blazor projenizde kurulduktan sonra, yeni bir Razor Bileşeni ekleyin. Bu eğitici için adını "IronPdfComponent" koyun. Bu bileşen kullanıcı girdisini ele alacak ve HTML içeriğine dayalı olarak PDF'leri dinamik şekilde oluşturacaktır. Blazor'daki bileşen mimarisi, uygulamanız genelinde paylaşılabilir yeniden kullanılabilir PDF oluşturma işlevselliği oluşturmayı kolaylaştırır.

Bunun ardından, kodu aşağıdaki gibi güncelleyin:

@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>";
    }
}

Imports System.Threading.Tasks
Imports Microsoft.JSInterop
Imports IronPdf

@Code

' Model to bind user input
Private _InputMsgModel As New InputHTMLModel()

Private Async Function SubmitHTML() As Task
    ' Set your IronPDF license key
    IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01"

    ' Create a renderer to convert HTML to PDF
    Dim 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
    Dim doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML)

    Dim fileName = "iron.pdf"

    ' Create a stream reference for the PDF content
    Using streamRef = New DotNetStreamReference(stream:=doc.Stream)
        ' Invoke JavaScript function to download the PDF in the browser
        Await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef)
    End Using
End Function

Public Class InputHTMLModel
    Public Property HTML As String = "<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>"
End Class

Bu bileşen, PDF oluşturma için ChromePdfRenderer sınıfını kullanıyor. Özel kağıt boyutları, kenar boşlukları ve başlıklar/altbilgiler gibi çeşitli seçeneklerle renderlemeyi özelleştirebilirsiniz.

IronPDF tarafından oluşturulan PDF'nin Blazor Uygulamasında indirilmesine izin vermek için bu JavaScript kodunu _layout.cshtml içerisine ekleyin:

<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>

Yeni Razor bileşenimiz için bir navigasyon sekmesi dahil etmek amacıyla Paylaşılan klasördeki NavMenu.razor dosyasını düzenleyin. Aşağıdaki kodu ekleyin:

<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>

Tüm bunlar uygulandıktan sonra, çözümünüzü çalıştırabilirsiniz ve şunu görmelisiniz:

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);
    });