IronPDF Blazor Server Tutorial: Renderowanie HTML do PDF w C

Jak utworzyc nowy projekt Blazor Server?

Utworz nowy projekt i wybierz typ Blazor Server App. Visual Studio zapewnia szablon do budowy aplikacji Blazor po stronie serwera, ktore moga uzywac .NET do generowania PDF. Model hostingowy Blazor Server wykonuje twoja logike aplikacji na serwerze, dzieki czemu jest odpowiedni do sytuacji generacji PDF wymagajacych przetwarzania po stronie serwera.

Jak zainstalowac IronPDF do mojego projektu Blazor?

Po utworzeniu projektu, wykonaj te kroki, aby zainstalowac biblioteke IronPDF z NuGet w Visual Studio. IronPDF zapewnia API do tworzenia PDF z ciagow HTML, URL-i i istniejacych dokumentow PDF.

1. W oknie Solution Explorer w Visual Studio kliknij prawym przyciskiem myszy References i wybierz Manage NuGet Packages.
2. Wybierz Browse i wyszukaj IronPdf.
3. Wybierz najnowsza wersje pakietu, zaznacz pole wyboru dla swojego projektu i kliknij zainstaluj.

Alternatywnie mozesz uzyc .NET CLI do zainstalowania go:

Install-Package IronPdf

Dla projektow celujacych w konkretne platformy, moze byc konieczne uzycie pakietow specyficznych dla platformy. Na przyklad, jesli wdrazasz na Linuxa, zapoznaj sie z przewodnikiem instalacji dla Linuxa.

Jak dodac nowy komponent Razor do generowania PDF?

Po zainstalowaniu IronPDF w projekcie Blazor, dodaj nowy komponent Razor. Dla tego kursu nazwij go "IronPdfComponent". Ten komponent bedzie obslugiwal dane wejsciowe uzytkownika i dynamicznie generowal PDF na podstawie zawartosci HTML. Architektura komponentow w Blazor ulatwia tworzenie funkcjonalnosci generowania PDF, ktora mozna ponownie wykorzystywac w calym twoim zastosowaniu.

Po tym zaktualizuj kod w nastepujacy sposob:

@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

Ten komponent uzywa klasy ChromePdfRenderer do generowania PDF. Mozesz dostosowac renderowanie przy uzyciu roznych opcji, takich jak niestandardowe rozmiary papieru, marginesy i naglowki/stopki.

Dodaj ten kod JavaScript do _layout.cshtml, aby umozliwic pobranie PDF wygenerowanego przez IronPDF w aplikacji Blazor:

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

Edytuj plik NavMenu.razor w folderze Shared, aby zawrzec zakladke nawigacyjna do naszego nowego komponentu Razor. Dodaj następujący kod:

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

Po zastosowaniu tego wszystkiego, mozna uruchomic rozwiazanie i powinienes to zobaczyc:

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