Mudblazor .NET 8
using IronPdf;
// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;
// Instantiate Renderer
var renderer = new ChromePdfRenderer();
// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");
// Export to a file or Stream
pdf.SaveAs("output.pdf");
// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");
Install-Package IronPdf
Ce tutoriel introduit MudBlazor et IronPDF dans le contexte de .NET 8 pour la création d'applications web. MudBlazor est une bibliothèque de composants pour les projets Blazor. Il fournit une gamme de composants d'interface utilisateur pour la création d'applications Blazor côté client et côté serveur. IronPDF est une bibliothèque qui permet la création, la manipulation et la lecture de documents PDF dans les applications .NET.
Nous verrons comment installer MudBlazor, utiliser ses composants pour le développement web et intégrer IronPDF pour les fonctionnalités PDF. Ce guide s'adresse aux débutants en Blazor et en .NET, mais il sera également utile aux développeurs intermédiaires désireux de se familiariser avec MudBlazor et IronPDF.
À la fin de ce tutoriel, vous saurez comment configurer une application Blazor Server, intégrer des composants Blazor et utiliser IronPDF pour travailler avec des fichiers PDF. L'accent est mis sur les connaissances pratiques nécessaires à la création d'applications web modernes avec Visual Studio. Commençons par configurer notre environnement et par créer un nouveau projet dans .NET 8.
Pour utiliser MudBlazor dans votre projet client ou serveur, assurez-vous d'abord que le Framework .NET est installé. Ensuite, créez un nouveau projet Blazor dans le dossier de présentation du client ou du serveur, en fonction de vos modèles d'hébergement. Pour ce faire, utilisez la ligne de commande ou Visual Studio. Dans Visual Studio, choisissez le modèle Blazor App.
Ensuite, ajoutez MudBlazor à votre projet. Ouvrez le terminal ou la console du gestionnaire de paquets. Exécutez la commande Install-Package MudBlazor. Cette commande ajoute MudBlazor à votre projet.
Après avoir installé MudBlazor, allez dans _Imports.razor. Ajoutez @using MudBlazor. Cela rend les composants de MudBlazor disponibles dans votre projet.
Dans wwwroot/index.html (ou Host.cshtml pour les projets serveur), ajoutez le CSS et le JS de MudBlazor dans le même fichier, en vous assurant que le mode de rendu interactif avec les paramètres de modèle par défaut est pris en charge. Inclure la ligne suivante :
<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.Ajouter également :
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.<script src="_content/MudBlazor/MudBlazor.min.js"></script>.Cette étape permet de s'assurer que les styles et les fonctionnalités de MudBlazor fonctionnent dans votre application.
Pour montrer MudBlazor en action, ajoutons un simple bouton à un composant. Ouvrez un fichier de composant Razor, comme Index.razor. Ajoutez le code suivant pour le bouton MudBlazor :
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
Click Me
</MudButton>
@code {
private void ButtonClick()
{
Console.WriteLine("Button clicked!");
}
}<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
Click Me
</MudButton>
@code {
private void ButtonClick()
{
Console.WriteLine("Button clicked!");
}
}Ce code initie la création d'un constructeur pour un bouton qui dit "Cliquez-moi". Lorsqu'il est cliqué, il enregistre un message dans la console, démontrant ainsi le rendu côté serveur. Les propriétés Variant et Color personnalisent l'apparence du bouton.
Le composant de dialogue de MudBlazor simplifie la création et la gestion des dialogues. Tout d'abord, injectez le IDialogService dans votre composant :
@inject IDialogService DialogService@inject IDialogService DialogServiceEnsuite, utilisez la méthode suivante pour ouvrir un dialogue :
private void OpenDialog()
{
DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}private void OpenDialog()
{
DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}MyDialog est un composant Razor représentant le contenu de la boîte de dialogue. Vous pouvez passer des paramètres avec DialogParameters.
MudBlazor propose un composant de grille de données pour l'affichage des collections. Il permet le tri, la pagination et le filtrage. Pour l'utiliser, liez une collection à la propriété Items :
<MudTable Items="@myItems">
<HeaderContent>
<MudTh>Header 1</MudTh>
<MudTh>Header 2</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Header 1">@context.Item1</MudTd>
<MudTd DataLabel="Header 2">@context.Item2</MudTd>
</RowTemplate>
</MudTable>
@code {
private List<MyItemType> myItems = /* Fetch or define your items here */;
}<MudTable Items="@myItems">
<HeaderContent>
<MudTh>Header 1</MudTh>
<MudTh>Header 2</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Header 1">@context.Item1</MudTd>
<MudTd DataLabel="Header 2">@context.Item2</MudTd>
</RowTemplate>
</MudTable>
@code {
private List<MyItemType> myItems = /* Fetch or define your items here */;
}
Pour les entrées de formulaire, MudBlazor fournit divers composants. Voici un exemple utilisant MudTextField :
<MudForm Model="@myModel">
<MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
public class MyModel
{
public string Text { get; set; }
}
private MyModel myModel = new MyModel();
}<MudForm Model="@myModel">
<MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
public class MyModel
{
public string Text { get; set; }
}
private MyModel myModel = new MyModel();
}Pour organiser le contenu avec des onglets, utilisez MudTabs. Définissez chaque onglet avec MudTabPanel :
<MudTabs>
<MudTabPanel Text="Tab 1">
Content for Tab 1
</MudTabPanel>
<MudTabPanel Text="Tab 2">
Content for Tab 2
</MudTabPanel>
</MudTabs><MudTabs>
<MudTabPanel Text="Tab 1">
Content for Tab 1
</MudTabPanel>
<MudTabPanel Text="Tab 2">
Content for Tab 2
</MudTabPanel>
</MudTabs>
MudBlazor s'intègre à Material Icons. Pour utiliser une icône, ajoutez un composant MudIcon :
<MudIcon Icon="@Icons.Material.Filled.Alarm" /><MudIcon Icon="@Icons.Material.Filled.Alarm" />Ce code affiche une icône d'alarme. Les icônes améliorent les interfaces utilisateur en fournissant des repères visuels.
IronPDF est une bibliothèque pour C# qui simplifie le processus de création, d'édition et de lecture de fichiers PDF au sein des applications .NET. Il se distingue car il nécessite une configuration minimale et il est assez simple en termes de conversion d'HTML en PDFs. Cela peut s'avérer particulièrement utile lorsque vous souhaitez générer des rapports ou des factures de manière dynamique.
La meilleure fonctionnalité d'IronPDF est sa capacité à convertir HTML en PDF, tout en préservant la disposition et le style d'origine. C'est idéal pour générer des fichiers PDF à partir de contenu web comme des rapports, des factures et de la documentation. Les fichiers HTML, les URL et les chaînes HTML sont tous pris en charge pour la conversion en fichiers PDF.
using IronPdf;
class Program
{
static void Main(string[] args)
{
var renderer = new ChromePdfRenderer();
// 1. Convert HTML String to PDF
var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
// 2. Convert HTML File to PDF
var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
// 3. Convert URL to PDF
var url = "http://ironpdf.com"; // Specify the URL
var pdfFromUrl = renderer.RenderUrlAsPdf(url);
pdfFromUrl.SaveAs("URLToPDF.pdf");
}
}using IronPdf;
class Program
{
static void Main(string[] args)
{
var renderer = new ChromePdfRenderer();
// 1. Convert HTML String to PDF
var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
// 2. Convert HTML File to PDF
var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
// 3. Convert URL to PDF
var url = "http://ironpdf.com"; // Specify the URL
var pdfFromUrl = renderer.RenderUrlAsPdf(url);
pdfFromUrl.SaveAs("URLToPDF.pdf");
}
}MudBlazor est une bibliothèque de composants pour Blazor, pleine de widgets et d'outils utiles pour construire des interfaces utilisateur réactives et interactives. Lorsque vous combinez les capacités d'interface utilisateur de MudBlazor avec la génération de PDF d'IronPDF, vous obtenez une puissante boîte à outils. Un cas d'utilisation courant pourrait être une application web qui permet aux utilisateurs de concevoir des documents ou des rapports à l'aide de composants MudBlazor, puis, d'un simple clic, de convertir ces conceptions en PDF téléchargeables à l'aide d'IronPDF.
Prenons un exemple basique où nous construisons une interface utilisateur avec MudBlazor et utilisons ensuite IronPDF pour convertir cette interface en un document PDF.
Tout d'abord, assurez-vous que MudBlazor et IronPDF sont installés dans votre projet. Vous pouvez le faire via le gestionnaire de paquets NuGet ou la console du gestionnaire de paquets :
Install-Package MudBlazor
Install-Package IronPdfSur votre page Blazor, vous pouvez ajouter des composants MudBlazor pour créer l'interface utilisateur. Voici un formulaire simple créé avec MudBlazor :
@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
<MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
<!-- Add more components as needed -->
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
private string reportTitle = "";
}@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
<MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
<!-- Add more components as needed -->
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
private string reportTitle = "";
}Maintenant, pour intégrer la fonctionnalité de génération de PDF, nous allons gérer la méthode GeneratePDF. Cette fonction convertit notre contenu HTML en fichier PDF :
private void GeneratePDF()
{
var renderer = new ChromePdfRenderer();
var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
PDF.SaveAs("Report.pdf");
}private void GeneratePDF()
{
var renderer = new ChromePdfRenderer();
var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
PDF.SaveAs("Report.pdf");
}Dans cet exemple simplifié, RenderHtmlAsPdf prend une chaîne de contenu HTML et la convertit en PDF. Dans une application complète, vous pouvez générer dynamiquement cette chaîne HTML en fonction des entrées de l'utilisateur ou d'autres sources de données.
Voici le résultat du code :
Ce guide vous permet d'utiliser MudBlazor et IronPDF avec .NET 8 pour le développement web. MudBlazor propose des composants d'interface utilisateur pour les applications Blazor, améliorant les interfaces utilisateur avec un minimum de code. IronPDF permet de créer et de manipuler des fichiers PDF, ce qui s'avère très utile pour la gestion des documents dans les applications .NET.
Grâce à des instructions pas à pas, vous apprendrez à intégrer MudBlazor dans vos projets, à utiliser ses composants et à tirer parti d'IronPDF pour générer des PDF à partir de contenus Web. Idéal pour les développeurs débutants et intermédiaires, ce tutoriel vous permet de vous assurer que vous êtes bien équipé pour créer des applications web modernes à l'aide de ces bibliothèques. Pour ceux qui souhaitent explorer davantage IronPDF, un essai gratuit commence à partir de $749.
Install-Package IronPdf
Aucune carte de crédit n'est requise
Votre clé d'essai devrait se trouver dans l'email.
Si ce n'est pas le cas, veuillez contacter
support@ironsoftware.com
Aucune carte de crédit n'est requise
Commencez GRATUITEMENT
Aucune carte de crédit n'est requise
Testez en production sans filigranes.
Fonctionne là où vous en avez besoin.
Obtenez 30 jours de produit entièrement fonctionnel.
Faites-le fonctionner en quelques minutes.
Accès complet à notre équipe d'ingénieurs pendant la période d'essai du produit
Aucune carte de crédit ou création de compte n'est nécessaire
Votre clé d'essai devrait être dans l'e-mail.
Si ce n'est pas le cas, veuillez contacter
support@ironsoftware.com
Commencez GRATUITEMENT
Aucune carte de crédit n'est requise
Testez en production sans filigranes.
Fonctionne là où vous en avez besoin.
Obtenez 30 jours de produit entièrement fonctionnel.
Faites-le fonctionner en quelques minutes.
Accès complet à notre équipe d'ingénieurs pendant la période d'essai du produit
Licences à partir de 749 $. Vous avez une question ? Contactez-nous.
Réservez une démonstration personnelle de 30 minutes.
Pas de contrat, pas de détails de carte, pas d'engagements.
10 produits .NET API pour vos documents de bureau
