IronPDF 於 Blazor 伺服器應用程式（HTML 轉 PDF 教學）

Translated

View the article in English

IronPDF 支援 .NET 6，並包含像 Blazor 這樣的專案類型。使用 Visual Studio，您可以將 IronPDF 添加到您的 Blazor Server App 項目中，並按照以下示例中所演示的方式使用它：

如何在Blazor伺服器端應用程式中查看PDF檔案

為 Blazor 應用程式安裝 HTML-to-PDF 庫
在 Visual Studio 中建立一個新的 Blazor 專案。
將網頁透過 URL 轉換為 PDF 文件
將網頁渲染到客戶端的網頁瀏覽器中
從 HTML 字串查看 PDF 文件

建立新的Blazor伺服器專案

建立一個新專案並選擇類型為 Blazor Server App。

將 IronPDF 安裝到您的 Blazor 專案中

在您創建項目後，請按照以下步驟安裝IronPDF 庫來自 NuGet在 Visual Studio 中。

在 Visual Studio 中的解決方案總管窗口中，右鍵點擊 參考 並選擇 管理 NuGet 套件。
選擇“瀏覽”並搜索 IronPdf。
選擇該套件的最新版本，勾選您的項目的複選框，然後點擊安裝。
或者，

Install-Package IronPdf

新增 Razor 元件

安裝 IronPDF 至您的 Blazor 專案後，首先新增一個新的 Razor 元件。在本教程中，我們將其命名為 "IronPdfComponent"：

之後，請按如下更新程式碼：

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

HTML

@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

VB C#

將此 JavaScript 代碼添加到 _layout.cshtml 中，以允許在 Blazor 應用程序中下載由 IronPDF 渲染的 PDF：

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

HTML

編輯 Shared 資料夾中的 NavMenu.razor 文件，以包含指向我們新的 Razor 元件的導航標籤。添加以下代码：

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

HTML

一旦這些都應用後，我們可以運行我們的解決方案，您應該會看到這個：