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 open PDF in new tabのタスクは、サーバーサイドのPDF生成とクライアントサイドのウィンドウ管理の橋渡しをするJavaScript InterOp (JS interop)を必要とします。
IronPDF を使用すると、開発者はサーバー上で高品質の PDF ドキュメントを生成し、JavaScript の window.open() 機能を使用して表示できるようになります。 このアプローチは、ネットアプリケーションでよくあるクライアントとサーバーの問題を解決することを意味します。
Blazor Webアプリで for JavaScript関数の実装
こ for 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.
window.openPdfInNewTab JavaScript関数は、サーバーから新しいタブを開くという課題を解決するために不可欠です。 Blazorサーバーから PDF データを Base64 文字列として受け入れ、クライアント側のコードによってバイナリ Blob オブジェクトに変換されます。
このblobを使用して一時的なURLが作成され、最終的にwindow.open(blobUrl, '_blank')に渡され、ブラウザがPDFを新しいタブで開くように強制されます。
Blazorコンポーネントの作成
PDFを生成し、新しいタブで開くRazorコンポーネントを新しく作成します。 これはソリューションのメインテンプレートとして機能します:
@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 バイト配列を Base64 文字列に変換し、 @inject IJSRuntime JS を使用してJavaScript関数を呼び出し、ユーザー向けにドキュメントを開きます。
UI出力

新しいタブで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 が既存の URL ではなく動的に生成された HTML マークアップから PDF を生成する方法を示しています。 それは、見出し、コンテンツ、および動的データを含む完全なHTML文字列を構築します。 動的コンテンツ生成に対する答えは、RenderHtmlAsPdf メソッドです。
更新されたBlazor Server UI

新しいブラウザータブで開かれた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.パフォーマンス: PDF生成中にUIがブロックされるのを防ぐために、非同期/待機パターンを使用してください。
- ユーザー体験:生成中に読み込みインジケーターを表示し、ポップアップブロッカーのシナリオを丁寧に処理してください。 4.DOMの操作:サーバー上のC#はクライアントのDOMを直接操作できないことを覚えておいてください; これが、JS InterOpが不可欠な理由です。 新しいウィンドウの高さまたは幅を手動で設定する必要はありません。ブラウザーがPDFビューアを処理します。 5.セキュリティ: PDFを生成する前にユーザー入力を検証し、サニタイズする
結論
IronPDFの強力なPDF生成機能とBlazor for JavaScript InterOpを組み合わせることで、新しいブラウザのタブでPDFを開くための堅牢なソリューションを提供します。 このアプローチにより、開発者は.NET技術でMicrosoftが構築したモダンなBlazorアプリケーションとシームレスに統合する動的でプロフェッショナルなPDFドキュメントを作成できます。
BlazorプロジェクトでPDF機能を実装する準備はできましたか? 今すぐIronPDFの無料トライアルを開始してください。 トライアルには透かしのないフル機能と成功を確実にするための包括的なサポートが含まれています。
よくある質問
Blazorを使用して新しいタブでPDFを開くにはどうすればよいですか?
Blazorを使ってPDFを新しいタブで開くには、IronPDFでPDFを生成し、それを新しいタブで表示するためにJavaScriptインターオプを利用します。このアプローチはドキュメント閲覧時のスムーズなユーザーエクスペリエンスを保証します。
Blazor for JavaScriptインターロップとは何ですか?
Blazor for JavaScriptインターオプにより、Blazorアプリケーションは.NETコードからJavaScript関数を呼び出したり、逆に.NETコードからJavaScript関数を呼び出すことができます。これは、PDFを新しいタブで開くような、JavaScriptがブラウザ固有の操作を処理するようなタスクに便利です。
BlazorでのPDF生成にIronPDFを使用する理由は?
IronPDFはBlazorアプリケーションでPDFを生成するための効率的なツールです。シームレスなPDFの作成と操作を可能にする堅牢な機能を提供し、Blazor for JavaScriptインターオプと簡単に統合してドキュメントのハンドリングを強化することができます。
IronPDFはBlazor Serverと互換性がありますか?
はい、IronPDFはBlazor Serverと完全に互換性があります。IronPDFはPDFの生成と管理に使用でき、JavaScriptインターオプを使って新しいタブで開くことができます。
BlazorアプリケーションでPDFを新しいタブで開く利点は何ですか?
新しいタブでPDFを開くと、ユーザーは現在のページから移動することなくドキュメントを見ることができ、ユーザーエクスペリエンスが向上します。IronPDFとJavaScriptの相互運用によってサポートされるこの方法は、よりインタラクティブで中断のないブラウジングセッションを保証します。


