使用Blazor教程創建PDF文件

在 Visual Studio 中建立新專案

首先，開啟 Microsoft Visual Studio 應用程式，然後從"檔案"選單中選擇"新專案"。 然後，選擇"Blazor 伺服器應用程式"。

使用 Blazor 建立 PDF 檔案教學，圖 1：在 Visual Studio 中建立新項目 在 Visual Studio 中建立新項目

輸入項目名稱並選擇檔案路徑。 然後，點擊"創建"按鈕。

使用 Blazor 建立 PDF 檔案教程，圖 2：選擇新 Blazor 應用程式的名稱和位置 選擇新 Blazor 應用程式的名稱和位置

選擇所需的 .NET Framework 版本（本教學課程將使用 .NET 6.0），如下圖所示：

使用 Blazor 建立 PDF 檔案教學，圖 3：在 Visual Studio 中使用 .NET 6.0 框架建立新項目 使用 .NET 6.0 框架在 Visual Studio 中建立新專案

Microsoft Visual Studio 現在將產生此 Blazor 應用程式的結構。

接下來，將 IronPDF 庫新增到這個新項目。

3.1 使用 Visual Studio 的 NuGet 套件管理器

Visual Studio 提供了 NuGet 套件管理器，以協助將程式庫直接安裝到專案中。 下面的截圖顯示了如何打開 NuGet Package Manager。

使用 Blazor 建立 PDF 檔案教學，圖 4：存取 Visual Studio 的 NuGet 套件管理器 存取 Visual Studio 的 NuGet 套件管理器

使用"瀏覽"標籤下的搜尋欄位搜尋"IronPDF"，如下圖所示：

使用 Blazor 建立 PDF 檔案教學，圖 5：在 NuGet 套件管理器 GUI 中搜尋 IronPDF 庫 在 NuGet 套件管理器 GUI 中搜尋 IronPDF 庫

上圖顯示的是相關搜尋結果清單。 選擇所需選項，將軟體包安裝到您的專案中。

3.2 使用 Visual Studio 命令列

在 Visual Studio 中，前往"工具" > "NuGet 套件管理員" > "套件管理員控制台"。

在程式包管理器控制台標籤中輸入以下命令：

Install-Package IronPdf

該軟體包現在將下載並安裝到當前專案中。

使用 Blazor 建立 PDF 檔案教程，圖 6：使用 NuGet 套件管理器控制台安裝 IronPDF 庫 使用 NuGet 套件管理器控制台安裝 IronPDF 庫

3.3 直接從 NuGet 網站下載

安裝 IronPDF 庫的第三種方法是直接從網站下載 NuGet 套件。

造訪IronPDF 的 NuGet 網站。

• 點選右側選單中的"下載軟體包"選項。
• 開啟檔案系統中下載的軟體包。 它會自動安裝。
• 重新載入解決方案，然後在您的專案中開始使用它。

3.4 直接從 IronPDF 網站下載

請造訪 IronPDF 網站直接下載 IronPDF 軟體包。

下載完成後，請按照以下步驟將該軟體包新增至您的專案：

• 在解決方案視窗中右擊專案。
• 選擇"新增">"引用"選項，然後導覽至您先前下載的庫的位置。
• 按一下"確定"將該庫新增為參考。

4. 在 Blazor 伺服器應用程式中建立 PDF 文檔

本教學中的 Blazor 應用程式將使用 IronPDF 透過 URL 取得網頁的 HTML 內容並將其轉換為 PDF 文件。

在專案中包含的 .razor 檔案中輸入以下原始程式碼。

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' This method exports data by converting a URL to a PDF file and initiating its download.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public async Task ExportData()
'	{
'		try
'		{
'			string fileName = "Demo.pdf";
'			var renderer = New ChromePdfRenderer();
'
'			' Render the contents of the URL as a PDF document
'			var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
'
'			' Save the PDF using a JavaScript function
'			await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
'		}
'		catch (Exception ex)
'		{
'			' Handle any exceptions that may occur
'			Console.@Error.WriteLine(string.Format("Error in ExportData: {0}", ex.Message));
'		}
'	}
End Property

上面的程式碼片段使用了兩種方法從 HTML 產生 PDF 文件。 第一個是 IronPDF 的RenderUrlAsPdf方法，它從給定的 URL 下載 HTML 內容並將其轉換為 PDF 格式。

第二種方法是靜態方法，它會觸發瀏覽器的 JavaScript 引擎，在網頁範圍內呼叫 JavaScript 函數，將 PDF 內容儲存到客戶端檔案系統上的檔案中。

下麵包含此 JavaScript 函數：

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

上面的 JavaScript 函數從 Blazor 接收 Base64 資料，並將其轉換為 blob，然後儲存到客戶端位置。

或者，也可以使用 @@--CODE-25114--@@ 類別中的 @@--CODE-25113--@@ 方法將 PDF 文件儲存到瀏覽器的本機儲存中。