Blazor 使用 IronPDF 在新標籤中開啟 PDF:開發人員教程
在新的瀏覽器標籤頁中開啟 PDF 文件是 Blazor Web 應用程式的常見需求。 本教學課程示範如何使用IronPDF產生 PDF 文件,並使用 JavaScript 互通在新分頁中顯示它們,從而為使用者提供無縫的文件檢視體驗。 本範例以 Blazor Server 版本為例。
前提條件和設置
首先在 Visual Studio 2022 中建立一個新的 Blazor Server 專案。透過 NuGet 套件管理器控制台安裝 IronPDF:
Install-Package IronPdf
在 Program.cs 檔案中設定您的 IronPDF 授權以啟用全部功能:
License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY"
理解挑戰
Blazor Server 應用程式無法透過伺服器上的 C# 程式碼直接操作瀏覽器標籤頁。 Blazor 在新分頁中開啟 PDF 的任務需要 JavaScript InterOp(JS 互通)來連接伺服器端 PDF 產生和用戶端視窗管理。
IronPDF 使開發人員能夠在伺服器上產生高品質的 PDF 文檔,然後可以使用 JavaScript 的 window.open() 功能顯示這些文檔。 這種方法意味著解決網路應用程式中常見的客戶端-伺服器問題。
在 Blazor Web 應用程式中實作 JavaScript 函數
將此 JavaScript 程式碼新增至您的 _Host.cshtml 檔案中,以處理在新瀏覽器標籤頁中顯示 PDF 檔案。 這是負責客戶端視窗管理的模組:
<script>
window.openPdfInNewTab = function (pdfData, fileName) {
// Convert base64 to blob
const byteCharacters = atob(pdfData);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
// The type is 'application/pdf', not 'image/png' or 'image/jpg'
const blob = new Blob([byteArray], { type: 'application/pdf' });
// Create URL and open in new tab
const blobUrl = URL.createObjectURL(blob);
const newWindow = window.open(blobUrl, '_blank');
if (newWindow) {
newWindow.document.title = fileName || 'PDF Document';
}
// Clean up
setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
return newWindow !== null;
};
</script>
<script>
window.openPdfInNewTab = function (pdfData, fileName) {
// Convert base64 to blob
const byteCharacters = atob(pdfData);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
// The type is 'application/pdf', not 'image/png' or 'image/jpg'
const blob = new Blob([byteArray], { type: 'application/pdf' });
// Create URL and open in new tab
const blobUrl = URL.createObjectURL(blob);
const newWindow = window.open(blobUrl, '_blank');
if (newWindow) {
newWindow.document.title = fileName || 'PDF Document';
}
// Clean up
setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
return newWindow !== null;
};
</script>
The provided code is JavaScript, not C#. However, I can help you convert it into VB.NET code that would perform a similar function if executed in a VB.NET environment with a web browser control or similar setup. Here's how you might implement similar functionality in VB.NET:
Note: This VB.NET code assumes you are working in a desktop application environment where you can use the `Process.Start` method to open a PDF file with the default PDF viewer. If you are working in a web environment, you would need to adapt this code to fit the web context, possibly using a web server to serve the PDF file to the client.
JavaScript 函數 window.openPdfInNewTab 對於解決從伺服器開啟新標籤頁的難題至關重要。 它從 Blazor 伺服器接收 Base64 字串形式的 PDF 數據,客戶端程式碼將其轉換為二進位 Blob 物件。
然後使用此 blob 建立一個臨時 URL,最後將其傳遞給window.open (blobUrl, '_blank') 以強制瀏覽器在新標籤頁中開啟 PDF。
建立 Blazor 組件
建立一個新的 Razor 元件,用於產生 PDF 檔案並在新分頁中開啟它們。 這是解決方案的主要範本:
@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
<label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
disabled="@isProcessing">
@if (isProcessing)
{
<span>Generating PDF...</span>
}
else
{
<span>Generate and Open PDF</span>
}
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
private string targetUrl = "https://ironpdf.com";
private bool isProcessing = false;
private string errorMessage = "";
private async Task GenerateAndOpenPdf()
{
isProcessing = true;
errorMessage = "";
try
{
// Configure Chrome PDF renderer. Note the rendering details
var renderer = new ChromePdfRenderer
{
RenderingOptions = new ChromePdfRenderOptions
{
MarginTop = 10,
MarginBottom = 10,
MarginLeft = 10,
MarginRight = 10,
EnableJavaScript = true,
RenderDelay = 500
}
};
// Generate PDF from URL
var pdfDocument = await Task.Run(() =>
renderer.RenderUrlAsPdf(targetUrl));
// Convert to base64
byte[] pdfBytes = pdfDocument.BinaryData;
string base64Pdf = Convert.ToBase64String(pdfBytes);
// Open in new tab via JS interop. We run this call to open the PDF
bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
if (!success)
{
// Giving the user an understandable error is key
errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
}
}
catch (Exception ex)
{
errorMessage = $"Error: {ex.Message}";
}
finally
{
isProcessing = false;
}
}
}
@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
<label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
disabled="@isProcessing">
@if (isProcessing)
{
<span>Generating PDF...</span>
}
else
{
<span>Generate and Open PDF</span>
}
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
private string targetUrl = "https://ironpdf.com";
private bool isProcessing = false;
private string errorMessage = "";
private async Task GenerateAndOpenPdf()
{
isProcessing = true;
errorMessage = "";
try
{
// Configure Chrome PDF renderer. Note the rendering details
var renderer = new ChromePdfRenderer
{
RenderingOptions = new ChromePdfRenderOptions
{
MarginTop = 10,
MarginBottom = 10,
MarginLeft = 10,
MarginRight = 10,
EnableJavaScript = true,
RenderDelay = 500
}
};
// Generate PDF from URL
var pdfDocument = await Task.Run(() =>
renderer.RenderUrlAsPdf(targetUrl));
// Convert to base64
byte[] pdfBytes = pdfDocument.BinaryData;
string base64Pdf = Convert.ToBase64String(pdfBytes);
// Open in new tab via JS interop. We run this call to open the PDF
bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
if (!success)
{
// Giving the user an understandable error is key
errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
}
}
catch (Exception ex)
{
errorMessage = $"Error: {ex.Message}";
}
finally
{
isProcessing = false;
}
}
}
Imports IronPDF
Imports Microsoft.JSInterop
@page "/pdf-viewer"
@inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
<label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" disabled="@isProcessing">
@If isProcessing Then
<span>Generating PDF...</span>
Else
<span>Generate and Open PDF</span>
End If
</button>
@If Not String.IsNullOrEmpty(errorMessage) Then
<div class="alert alert-danger mt-3">@errorMessage</div>
End If
@Code
Private targetUrl As String = "https://ironpdf.com"
Private isProcessing As Boolean = False
Private errorMessage As String = ""
Private Async Function GenerateAndOpenPdf() As Task
isProcessing = True
errorMessage = ""
Try
' Configure Chrome PDF renderer. Note the rendering details
Dim renderer As New ChromePdfRenderer With {
.RenderingOptions = New ChromePdfRenderOptions With {
.MarginTop = 10,
.MarginBottom = 10,
.MarginLeft = 10,
.MarginRight = 10,
.EnableJavaScript = True,
.RenderDelay = 500
}
}
' Generate PDF from URL
Dim pdfDocument = Await Task.Run(Function() renderer.RenderUrlAsPdf(targetUrl))
' Convert to base64
Dim pdfBytes As Byte() = pdfDocument.BinaryData
Dim base64Pdf As String = Convert.ToBase64String(pdfBytes)
' Open in new tab via JS interop. We run this call to open the PDF
Dim success As Boolean = Await JS.InvokeAsync(Of Boolean)("openPdfInNewTab", base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf")
If Not success Then
' Giving the user an understandable error is key
errorMessage = "Pop-up blocked. Please allow pop-ups for this site."
End If
Catch ex As Exception
errorMessage = $"Error: {ex.Message}"
Finally
isProcessing = False
End Try
End Function
End Code
此程式碼區塊定義了主要的互動式頁面。 Razor 標記創建了一個簡單的使用者介面,其中包含一個 URL 輸入欄位和一個按鈕。 C# @code 程式碼區塊處理邏輯:當按鈕被點擊時,它使用 ChromePdfRenderer 實例從使用者提供的 URL 產生 PDF。
然後,它將生成的 PDF 位元組數組轉換為字串,並使用 JS 呼叫 JavaScript 函數,從而為使用者開啟文件。
使用者介面輸出
輸出結果以 PDF 格式在新分頁中開啟。
處理動態 HTML 內容
若要從動態內容而非 URL 產生 PDF,請修改您的方法以使用 RenderHtmlAsPdf:
private async Task GenerateFromHtml()
{
// Define CSS styles inside the HTML string for structure and appearance.
string htmlContent = $@"
<!DOCTYPE html>
<html>
<head>
<style>
body {{ font-family: Arial; padding: 20px; }}
h1 {{ color: #2c3e50; }}
</style>
</head>
<body>
<h1>{documentTitle}</h1>
<p>{documentContent}</p>
<div>Generated: {DateTime.Now}</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
byte[] pdfBytes = pdfDocument.BinaryData;
await JS.InvokeVoidAsync("openPdfInNewTab",
Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}
private async Task GenerateFromHtml()
{
// Define CSS styles inside the HTML string for structure and appearance.
string htmlContent = $@"
<!DOCTYPE html>
<html>
<head>
<style>
body {{ font-family: Arial; padding: 20px; }}
h1 {{ color: #2c3e50; }}
</style>
</head>
<body>
<h1>{documentTitle}</h1>
<p>{documentContent}</p>
<div>Generated: {DateTime.Now}</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
byte[] pdfBytes = pdfDocument.BinaryData;
await JS.InvokeVoidAsync("openPdfInNewTab",
Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}
Private Async Function GenerateFromHtml() As Task
' Define CSS styles inside the HTML string for structure and appearance.
Dim htmlContent As String = $"
<!DOCTYPE html>
<html>
<head>
<style>
body {{ font-family: Arial; padding: 20px; }}
h1 {{ color: #2c3e50; }}
</style>
</head>
<body>
<h1>{documentTitle}</h1>
<p>{documentContent}</p>
<div>Generated: {DateTime.Now}</div>
</body>
</html>"
Dim renderer = New ChromePdfRenderer()
Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
Dim pdfBytes As Byte() = pdfDocument.BinaryData
Await JS.InvokeVoidAsync("openPdfInNewTab", Convert.ToBase64String(pdfBytes), "dynamic.pdf")
End Function
GenerateFromHtml 方法示範了 IronPDF 如何從動態產生的 HTML 標記而不是現有 URL 產生 PDF。 它會建立一個完整的 HTML 字串,其中包含標題、內容和動態資料。 動態內容產生的答案是 RenderHtmlAsPdf 方法。
Blazor 伺服器使用者介面已更新
PDF檔案在新瀏覽器標籤頁中開啟
Blazor 使用 IronPDF 在新分頁中開啟 PDF:開發者教學:圖 4 - 建立並在新分頁中開啟的動態 PDF 範例
處理常見問題
跨瀏覽器相容性
不同的瀏覽器對 blob URL 的處理方式不同。 在 Chrome、Firefox、Edge 和 Safari 瀏覽器上測試您的實現,以確保行為一致。
大文件
對於大型PDF文檔,可以考慮實施伺服器端快取來提高效能:
services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration
導航替代方案
除了 JavaScript 互通之外,您還可以透過靜態文件中間件提供 PDF 文件,並使用標準的 HTML 錨點標籤作為另一種導覽方式:
<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>
<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>
The provided input is HTML, not C# code. Please provide valid C# code for conversion to VB.NET.
這種方法對於預先產生的 PDF 檔案效果很好,但缺乏 JS InterOp 方法的動態產生功能。
最佳實務
1.錯誤處理:始終將 PDF 產生程式碼封裝在 try-catch 區塊中,並在出現問題時向使用者提供有意義的錯誤訊息。 2.效能:使用 async/await 模式防止在 PDF 產生期間 UI 阻塞。 3.使用者體驗:在生成過程中顯示載入指示器,並優雅地處理彈出視窗攔截器場景。
- DOM操作:請記住,伺服器端的 C# 不能直接操作客戶端的 DOM; 這就是為什麼 JS 互通性至關重要。 您無需手動設定新視窗的高度或寬度,因為瀏覽器會自動處理 PDF 檢視器。 5.安全性:在產生PDF之前驗證並清理使用者輸入。
結論
將 IronPDF 強大的 PDF 生成功能與 Blazor 的 JavaScript InterOp 結合,為在新瀏覽器標籤頁中開啟 PDF 提供了一個強大的解決方案。 這種方法使開發人員能夠創建動態、專業的 PDF 文檔,並與基於 Microsoft .NET 技術構建的現代 Blazor 應用程式無縫整合。
準備在 Blazor 專案中實現 PDF 功能嗎? 立即開始您的 IronPDF 免費試用。 試用版包含所有功能,無浮水印,並提供全面的支援,確保您成功。
常見問題解答
如何使用 Blazor 在新分頁中開啟 PDF 檔案?
您可以使用 Blazor 在新標签頁中打開 PDF,方法是使用 IronPDF 生成 PDF,并利用 JavaScript interop 在新標签頁中顯示 PDF。這種方法可確保用戶在檢視文件時有流暢的使用體驗。
什麼是 Blazor 中的 JavaScript interop?
Blazor 中的 JavaScript interop 允許 Blazor 應用程式從 .NET 程式碼呼叫 JavaScript 函式,反之亦然。這對於在新標籤開啟 PDF 等任務非常有用,JavaScript 可以處理瀏覽器特定的操作。
為什麼要使用 IronPDF 在 Blazor 中產生 PDF?
IronPDF 是在 Blazor 應用程式中產生 PDF 的有效工具。它提供了強大的功能,可進行無縫的 PDF 創建與操作,可輕鬆與 Blazor 的 JavaScript 互操作整合,以增強文件處理能力。
IronPDF 是否與 Blazor 伺服器相容?
是的,IronPDF 與 Blazor 伺服器完全相容。它可以用來產生和管理 PDF,然後使用 JavaScript interop 在新的索引標籤中打開。
在 Blazor 應用程式中以新標籤開啟 PDF 有什麼好處?
在新索引標籤中開啟 PDF 可增強使用者體驗,讓使用者不需從目前頁面導航即可檢視文件。IronPDF 與 JavaScript 互操作支援的此方法可確保瀏覽會話更具互動性,且不會中斷。



