IronPDF Blazor Sunucu Eğitim: HTML'den C#'te PDF'ye Dönüştürme

Yeni Blazor Sunucu Projesini Nasıl Oluştururum?

Yeni bir proje oluşturun ve Blazor Sunucu Uygulaması türünü seçin. Visual Studio, sunucu tarafı Blazor uygulamaları inşa etmek için bir şablon sağlar ve PDF oluşturma için .NET kullanabilir. Blazor Sunucu barındırma modeli, uygulama mantığınızı sunucuda çalıştırır, bu da sunucu tarafı işleme gerektiren PDF oluşturma senaryoları için uygundur.

IronPDF Blazor Projeme Nasıl Kurarım?

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

1. Visual Studio'daki Çözüm Gezgini penceresinde, References öğesini sağ tıklayın ve Manage NuGet Packages öğesini seçin.
2. Gözat'ı seçin ve IronPdf'yi arayın.
3. Paketlerin en son sürümünü seçin, projeniz için kutuyu işaretleyin ve yükle'ye tıklayın.

Alternatif olarak, .NET CLI'yi kullanarak yükleyebilirsiniz:

Install-Package IronPdf

Belirli platformlara yönelik projeler için platforma özgü paketlere ihtiyacınız olabilir. Örneğin, Linux'a dağıtıyorsanız, Linux kurulum kılavuzunu gözden geçirin.

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

Blazor projenizde IronPDF kurulduktan sonra, yeni bir Razor Bileşeni ekleyin. Bu eğitim için, dosyaya IronPdfComponent adını verin. Bu bileşen, kullanıcı girdiğini ele alacak ve HTML içeriğine dayalı olarak dinamik PDF'ler 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.

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ır. Farklı seçeneklerle rendereyebilir, özel kağıt boyutları, kenar boşlukları, ve başlıklar/altbilgiler gibi.

Blazor Uygulamasında IronPDF tarafından oluşturulan PDF'nin indirilmesini sağlamak için bu JavaScript kodunu _layout.cshtml'ye 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>

Shared klasöründeki NavMenu.razor dosyasını düzenleyerek yeni Razor bileşenimize bir gezinme sekmesi ekleyin. 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>

Bunların hepsi 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);
    });