使用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套件管理器。

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

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

使用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}");
        }
    }
}

上面的程式碼片段使用了兩種方法從 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，然後儲存到客戶端位置。

或者，也可以使用ChromePdfRenderer類別中的SaveAs方法將 PDF 文件儲存到瀏覽器的本機儲存中。