在實際環境中測試
在生產環境中測試無浮水印。
在任何需要的地方都能運作。
本教程介紹 MudBlazor 和 IronPDF 在使用 .NET 8 建構網頁應用程式的環境中,MudBlazor 是一個專門為 Blazor 專案設計的元件庫。它提供一系列用於構建客戶端和伺服器端 Blazor 應用程式的 UI 元件。IronPDF 是一個庫,它能夠在 .NET 應用程式中創建、操作和讀取 PDF 文件。
我們將介紹如何安裝 MudBlazor、使用其元件進行網頁開發,以及整合 IronPDF 以實現 PDF 功能。本指南針對 Blazor 和 .NET 的初學者,但對於尋求學習 MudBlazor 和 IronPDF 的中級開發者也會有所幫助。
通過本教程的學習,您將能夠設置一個 Blazor Server 應用程式,整合 MudBlazor 元件,並使用 IronPDF 處理 PDF 文件。重點在於用 Visual Studio 建構現代網頁應用程式的實用知識。我們首先從設定環境和在 .NET 8 中創建一個新專案開始。
要在客戶端或伺服器項目中使用 MudBlazor,首先請確保您已安裝 .NET Framework。然後,在客戶端佈局文件夾或伺服器佈局中建立一個新的 Blazor 專案,根據您的托管模型決定。在命令行或 Visual Studio 中進行操作。在 Visual Studio 中,選擇 Blazor App 模板。
接下來,將 MudBlazor 添加到您的專案中。打開終端或套件管理控制台。運行命令 Install-Package MudBlazor。此命令將 MudBlazor 添加到您的專案中。
安裝 MudBlazor 後,請前往 _Imports.razor。添加 @using MudBlazor。這會讓 MudBlazor 元件在您的專案中可用。
在 wwwroot/index.html (或 Host.cshtml 用於伺服器專案)將MudBlazor的CSS和JS添加到同一個文件中,確保支持帶有默認模板設置的互動渲染模式。包括以下行:
<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<link href="content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />.
此外,添加:
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<script src="_content/MudBlazor/MudBlazor.min.js"></script>.
此步驟確保MudBlazor的樣式和功能在你的應用程式中正常運作。
為了展示 MudBlazor 的實際運行,讓我們在元件中添加一個簡單的按鈕。打開一個 Razor 元件文件,例如 Index.razor。添加以下 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!");
}
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudButton [Variant]="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick"> Click [Me] </MudButton> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
' private void ButtonClick()
' {
' Console.WriteLine("Button clicked!");
' }
End If
此程式碼為按鈕創建一個 builder,該按鈕上顯示“點擊我”。當按下時,它會記錄一條訊息至主控台,以演示伺服器端渲染。Variant 和 Color 屬性用於自訂按鈕的外觀。
MudBlazor 的對話框元件簡化了對話框的創建和管理。首先,在您的元件中注入 IDialogService:
@inject IDialogService DialogService
@inject IDialogService DialogService
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@inject IDialogService DialogService
然後,使用以下方法打開對話框:
private void OpenDialog()
{
DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}
private void OpenDialog()
{
DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}
Private Sub OpenDialog()
DialogService.Show(Of MyDialog)("My Dialog", New DialogParameters With {("Parameter1") = "Value1"})
End Sub
MyDialog 是一個表示對話內容的 Razor 元件。您可以使用 DialogParameters 傳遞參數。
MudBlazor 提供了一個用於顯示集合的資料格組件。它支持排序、分頁和過濾。要使用它,將一個集合綁定到 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 */;
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudTable Items="@myItems"> (Of HeaderContent) (Of MudTh) Header 1</MudTh> (Of MudTh) Header 2</MudTh> </HeaderContent> (Of RowTemplate) <MudTd DataLabel="Header 1"> context.Item1</MudTd> <MudTd DataLabel="Header 2"> context.Item2</MudTd> </RowTemplate> </MudTable> code
If True Then
private List(Of MyItemType) myItems =
End If
對於表單輸入,MudBlazor 提供各種元件。以下是一個使用 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();
}
'INSTANT VB TODO TASK: The following line could not be converted:
<MudForm Model="@myModel"> <MudTextField Label="Enter text" [For]="@(() => myModel.Text)"></MudTextField> </MudForm> code
If True Then
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
' public class MyModel
' {
' public string Text
' {
' get;
' set;
' }
' }
private MyModel myModel = New MyModel()
End If
要使用標籤頁組織內容,請使用 MudTabs。用 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>
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudTabs> <MudTabPanel Text="Tab 1"> Content for Tab 1 </MudTabPanel> <MudTabPanel Text="Tab 2"> Content for Tab 2 </MudTabPanel> </MudTabs>
MudBlazor 與 Material Icons 整合。要使用圖示,請添加一個 MudIcon 組件:
<MudIcon Icon="@Icons.Material.Filled.Alarm" />
<MudIcon Icon="@Icons.Material.Filled.Alarm" />
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<MudIcon Icon="@Icons.Material.Filled.Alarm" />
此程式碼顯示一個警報圖示。圖示通過提供視覺提示來增強使用者介面。
IronPDF 是一個用於C#的庫,可以簡化在.NET應用程式中建立、編輯和閱讀PDF檔案的過程。它之所以出色,是因為它需要最少的設置,並且在轉換方面非常簡單。 HTML 到 PDF. 當你希望動態生成報告或發票時,這特別方便。
IronPDF 最好的功能是其轉換的能力 HTML轉PDF, 保留原始佈局和風格。它非常適合從網頁內容生成 PDF,例如報告、發票和文檔。HTML 文件、URL 和 HTML 字串都支持轉換為 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");
}
}
Imports IronPdf
Friend Class Program
Shared Sub Main(ByVal args() As String)
Dim renderer = New ChromePdfRenderer()
' 1. Convert HTML String to PDF
Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")
' 2. Convert HTML File to PDF
Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")
' 3. Convert URL to PDF
Dim url = "http://ironpdf.com" ' Specify the URL
Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
pdfFromUrl.SaveAs("URLToPDF.pdf")
End Sub
End Class
MudBlazor 是用於 Blazor 的組件庫,充滿了對於構建響應式和交互式 UI 有用的小工具和工具。當您將 MudBlazor 的 UI 功能與 IronPDF 的 PDF 生成結合在一起時,您會得到一個強大的工具包。一個常見的用例是:一個 Web 應用允許用戶使用 MudBlazor 組件設計文檔或報告,然後只需點擊一個按鈕,即可使用 IronPDF 將這些設計轉換成可下載的 PDF。
讓我們通過一個基本示例,建立一個帶有MudBlazor的UI,然後使用IronPDF將此UI轉換為PDF文檔。
首先,確保你的專案中已安裝了MudBlazor和IronPDF。你可以通過NuGet軟件包管理器或軟件包管理器控制台來完成這個任務:
Install-Package MudBlazor
Install-Package IronPdf
在您的Blazor頁面上,您可以添加MudBlazor元件來建立UI。以下是一個使用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 = "";
}
Add -= 1
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <!-- Add more TryCast(components, needed) -- > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> @code
"Color.Primary" OnClick="@GeneratePDF"> Generate PDF</MudButton> </MudPaper> code
If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant="Variant.Filled" Color="Color.Primary" OnClick
"Variant.Filled" Color="Color.Primary" OnClick
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant="Variant.Filled" Color
"@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]="Variant.Filled" Color
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" /> <! Add more TryCast(components, needed) > <MudButton @Variant
"Enter Report Title" bind-Value="@reportTitle" /> <(Not Add) more TryCast(components, needed) > <MudButton [Variant]
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label="Enter Report Title" @bind-Value
"p-4"> <MudTextField Label="Enter Report Title" bind-Value
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper @Class="p-4"> <MudTextField Label
"Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]="p-4"> <MudTextField Label
page "/report" <MudText Typo="Typo.h5"> Generate PDF Report</MudText> <MudPaper [Class]
TryCast(components, needed) -= 1
private String reportTitle = ""
End If
現在,要集成PDF生成功能,我們將處理 GeneratePDF 方法。該函數將我們的HTML內容轉換為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");
}
Private Sub GeneratePDF()
Dim renderer = New ChromePdfRenderer()
Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
PDF.SaveAs("Report.pdf")
End Sub
在這個簡化的範例中,RenderHtmlAsPdf 會將 HTML 內容的字串轉換為 PDF。在完整的應用程式中,您可能會根據使用者輸入或其他資料來源動態生成此 HTML 字串。
以下是程式碼的輸出結果:
本指南教您如何使用 MudBlazor 和 IronPDF 與 .NET 8 進行網頁開發。MudBlazor 為 Blazor 應用提供 UI 組件,從而用最少的代碼增強用戶界面。IronPDF 允許創建和操作 PDF,對於 .NET 應用中的文檔管理非常有價值。
通過逐步說明,您將學會將 MudBlazor 集成到您的項目中,使用其組件,並利用 IronPDF 從網頁內容生成 PDF。這對於初學者和中級開發人員都是理想的教程,確保您能夠使用這些庫構建現代網頁應用。對於那些有興趣進一步探索 IronPDF 的人士, 免費試用 起價 $749。