1. IronPDF
2. Cómo Hacer
3. Renderizar Blazor Server a PDF

Tutorial de la aplicación IronPDF en Blazor Server

IronPDF es compatible con .NET 6 y tipos de proyectos incluidos como Blazor. Utilizando Visual Studio, puede añadir IronPDF a su proyecto Blazor Server App y utilizarlo como se demuestra en el siguiente ejemplo:

Crear un nuevo proyecto de servidor Blazor

Cree un nuevo Proyecto y seleccione el tipo blazor Server App

Instale IronPDF en su proyecto Blazor

Una vez creado el proyecto, siga los pasos siguientes para instalar el programa Biblioteca IronPDF desde NuGet dentro de Visual Studio.

1. En la ventana del Explorador de soluciones de Visual Studio, haga clic con el botón derecho del ratón en "Referencias" y seleccione "Administrar paquetes NuGet".
2. Seleccione Examinar y busque IronPdf.

3. Selecciona la última versión del paquete, marca la casilla correspondiente a tu proyecto y haz clic en instalar.

   Alternativamente,

Install-Package IronPdf

Añadir nuevo componente Razor

Una vez instalado IronPDF en su proyecto Blazor, comience añadiendo un nuevo componente Razor. Para este tutorial lo llamaremos "IronPdfComponent":

Después, actualiza el código como sigue:

@page "/IronPdf" @inject IJSRuntime JS
<h3>IronPdfComponent</h3>
<EditForm Model="@_InputMsgModel" id="inputText">
    <div>
        <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
    </div>
    <div>
        <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 onclick="@SubmitHTML">Render HTML</button>
    </div>
</EditForm>

@code {

    InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
        var render = new IronPdf.ChromePdfRenderer();
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
        var fileName = "iron.pdf";
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = "My new message";
    }
}

@code {

    InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
        var render = new IronPdf.ChromePdfRenderer();
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
        var fileName = "iron.pdf";
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = "My new message";
    }
}

code
If True Then

	Dim _InputMsgModel As New InputHTMLModel()

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async Task SubmitHTML()
'	{
'		IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
'		var render = New IronPdf.ChromePdfRenderer();
'		var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
'		var fileName = "iron.pdf";
'		var streamRef = New DotNetStreamReference(stream: doc.Stream);
'		await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
'	}

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public class InputHTMLModel
'	{
'		public string HTML
'		{
'			get;
'			set;
'		} = "My new message";
'	}
End If

Añada este código JavaScript a _layout.cshtml para permitir la descarga del PDF renderizado por IronPDF en la aplicación Blazor.

<script>
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "";
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

<script>
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "";
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

Edita el archivo NavMenu.razor en la carpeta Shared para incluir una pestaña de navegación a nuestro nuevo componente Razor. Añade el siguiente código:

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

Una vez que todo esto se ha aplicado podemos ejecutar nuestra solución y usted debe ver esto: