使用Blazor教程創建PDF文件

在Visual Studio中創建一個新專案

首先，打開 Microsoft Visual Studio 應用程式，並從檔案功能表中選擇“新建專案”。 接著，選擇“Blazor 伺服器應用”。

在 Visual Studio 中創建新專案

輸入專案名稱並選擇文件路徑。 然後，點擊創建按鈕。

選擇新 Blazor 應用程式的名稱和位置

選擇所需的 .NET 框架（在本教學中將使用 .NET 6.0），如下圖所示：

使用 .NET 6.0 框架在 Visual Studio 中創建新專案

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

接下來，將 IronPDF 函式庫添加到此新專案中。

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

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

訪問 Visual Studio 的 NuGet 套件管理器

使用瀏覽標籤下的搜索欄搜尋“IronPDF”，如下圖所示：

在 NuGet 套件管理器 GUI 中搜尋 IronPDF 函式庫

上圖顯示了相關搜索結果的列表。 選擇所需的選項將軟體包安裝到你的專案中。

3.2 使用 Visual Studio 命令行

在 Visual Studio 中，前往工具 > NuGet 套件管理器 > 包管理器控制台

在包管理器控制台標籤中輸入以下行：

Install-Package 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 格式。

第二種方法是靜態 JSRuntime.InvokeVoidAsync 方法，這會觸發瀏覽器的 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，然後存儲到客戶端位置。

Alternatively, The SaveAs method from the ChromePdfRenderer class can also be used to save PDF documents to the browser's local storage.