MudBlazor在Blazor專案中是用來做什麼的？

MudBlazor是一個用於Blazor專案的元件程式庫，提供多種UI元件，簡化互動式和現代網頁應用程式的開發。

如何在.NET 8專案中安裝MudBlazor？

要在.NET 8專案中安裝MudBlazor，請在套件管理器控制台中使用命令 Install-Package MudBlazor ，或透過Visual Studio的終端機進行安裝。

IronPDF為.NET應用程式提供了哪些功能？

IronPDF提供了建立、操作和讀取PDF文件的功能，它可以輕鬆地將HTML內容轉換為PDF，同時保留佈局和樣式。

如何在我的Blazor應用程式中設置MudBlazor元件？

要設置MudBlazor元件，將 @using MudBlazor 新增到您的_Imports.razor文件，並在'wwwroot/index.html'或'Host.cshtml'中包含必要的MudBlazor CSS和JS文件以用於伺服器專案。

MudBlazor在UI開發中有哪些主要功能？

MudBlazor提供諸如對話框、資料網格、輸入表單、選項卡和圖標等核心功能，這些功能增強了Blazor應用程式的UI設計和功能。

如何在專案中將IronPDF與MudBlazor整合？

可以將IronPDF與MudBlazor整合，將UI設計轉換為PDF，允許開發者建立使用者可以設計介面並生成PDF文件以供下載的應用程式。

在實際中有哪些場景可以同時使用MudBlazor和IronPDF？

一個實際場景是開發一個應用，提供使用者使用MudBlazor元件建立報告，然後使用IronPDF將其轉換為PDF格式，方便共享和列印。

如何在.NET應用程式中將HTML內容轉換為PDF？

在.NET應用程式中，您可以使用IronPDF的 ChromePdfRenderer 將HTML內容轉換為PDF。範例程式碼： var renderer = new ChromePdfRenderer(); var pdf = renderer.RenderHtmlAsPdf(htmlContent); pdf.SaveAs("output.pdf");

誰會從這個MudBlazor和IronPDF的教程中受益？

本教程對Blazor和.NET的初學者以及想要提升使用MudBlazor和IronPDF技巧的中級開發者是有益的，幫助他們構建現代網頁應用程式。

C# PDF程式庫

Q: 您能提供一個簡單的MudBlazor元件範例嗎？

一個簡單的MudBlazor元件範例是建立一個按鈕： <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">點擊我</MudButton> ，在點擊時觸發事件。

Explore IronPDF 開始免費試用

HTML 轉 PDF

Online Demo 查看所有程式碼範例

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

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

PM >Install-Package IronPdf

Install-Package IronPdf

開發者更新

Mudblazor .NET 8（對於開發者的運行原理）

Jacob Mellor

Updated: 2026年4月21日

本教程介紹了<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專案中設定MudBlazor

要在客戶端或伺服器專案中使用MudBlazor，首先確保已安裝.NET Framework。然後在客戶端佈局資料夾中或伺服器佈局中建立一個新的Blazor專案，具體取決於您的託管模型。使用命令行或Visual Studio來完成這一步。在Visual Studio中，選擇Blazor App範本。

接下來，將MudBlazor加入您的專案。打開終端機或Package Manager Console並執行以下命令：

PM > Install-Package MudBlazor

Install-Package MudBlazor

此命令將MudBlazor加入您的專案。

安裝MudBlazor後，進入_Imports.razor。新增以下內容：

@using MudBlazor

@using MudBlazor

Text

這將使MudBlazor元件在您的專案中可用。

在Host.cshtml）中，新增MudBlazor的CSS和JS到同一文件，確保支持預設範本設置的互動渲染模式。包含以下行：

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

HTML

另外新增：

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

HTML

此步驟確保MudBlazor的樣式和功能在您的應用程式中運作。

基本程式碼範例：構建一個簡單的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!");
    }
}

Text

此程式碼建立一個顯示"Click Me"字樣的按鈕。當按下此按鈕時，它會向控制台記錄一條資訊，展示伺服器端渲染。屬性Color用於自定義按鈕外觀。

MudBlazor的特性

MudBlazor中的對話框

MudBlazor的對話框元件可以簡化對話框的建立和管理。首先，在您的元件中注入IDialogService：

@inject IDialogService DialogService

@inject IDialogService DialogService

Text

然後使用以下方法打開一個對話框：

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

Text

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 */;
}

Text

Mudblazor .NET 8（對開發者的運作方式）：圖1

輸入表單

對於表單輸入，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();
}

Text

標簽頁

要用標簽頁組織內容，使用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>

Text

Mudblazor .NET 8（對開發者的運作方式）：圖2

圖標

MudBlazor與Material Icons整合。要使用圖標，新增一個MudIcon元件：

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

Text

此程式碼顯示一個警報圖標。圖標透過提供視覺線索來增強使用者介面。

IronPDF和MudBlazor的整合

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();
        
        // 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");
        
        // 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");
        
        // 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();
        
        // 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");
        
        // 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");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' 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")

        ' 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")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

將IronPDF與C# MudBlazor合並的使用案例

MudBlazor是用於Blazor的元件庫，充滿了用於建構響應性和互動性UI的實用工具和工具。當您將MudBlazor的UI功能與IronPDF的PDF生成功能結合時，您就擁有了一個強大的工具包。一個常見的使用案例可能是網頁應用程式允許使用者使用MudBlazor元件設計文件或報告，然後點擊一個按鈕，使用IronPDF將這些設計轉換為可下載的PDF。

使用案例的程式碼範例

讓我們來看看一個基本的範例，其中我們用MudBlazor構建一個UI，然後使用IronPDF將此UI轉換為PDF文件。

首先，確保您的專案中安裝了MudBlazor和IronPDF。您可以透過NuGet Package Manager或Package Manager Console來完成這一操作：

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

SHELL

步驟1：用MudBlazor構建UI

在您的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 = "";
}

Text

步驟2：使用IronPDF實現PDF生成

現在，為了整合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

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 .NET 8（對開發者的運作方式）：圖3

以下是程式碼的輸出：

Mudblazor .NET 8（對開發者的運作方式）：圖4

結論

本指南帶您使用MudBlazor和IronPDF結合.NET 8進行網頁開發。 MudBlazor為Blazor應用程式提供UI元件，通過最少的程式碼來增強使用者介面。 IronPDF允許建立和操作PDF，在.NET應用程式的文件管理中極為有用。

透過逐步指導，您將學會如何將MudBlazor整合到您的專案中，運用其元件，並利用IronPDF從網頁內容生成PDF。本教程對於初學者和中級開發者都是理想的，確保您具備使用這些程式庫構建現代網頁應用程式的能力。對於那些有興趣進一步探索IronPDF的人，一個免費試用從$999開始。

Jacob Mellor

立即與工程團隊聊天

首席技術官

Jacob Mellor是Iron Software的首席技術官，一位在C# PDF技術上開創先河的遠見工程師。作為Iron Software核心程式碼庫的原開發者，他從創立以來就一直在塑造公司的產品架構，與首席執行官Cameron Rimington一起將公司轉變為服務於NASA、特斯拉和全球政府公司的50多名人員的公司。

...