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の相互運用によってサポートされるこの方法は、よりインタラクティブで中断のないブラウジングセッションを保証します。

C# PDFライブラリ

Explore IronPDF 無料トライアル

HTML から PDF へ

Online Demo すべてのコード例を見る

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

using IronPdf;

// Disable local disk access or cross-origin requests
Installation.EnableWebSecurity = true;

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Create a PDF from a HTML string using C#
var pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");

// Export to a file or Stream
pdf.SaveAs("output.pdf");

// Advanced Example with HTML Assets
// Load external html assets: Images, CSS and JavaScript.
// An optional BasePath 'C:\site\assets\' is set as the file location to load assets from
var myAdvancedPdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
myAdvancedPdf.SaveAs("html-with-assets.pdf");

PM >

Install-Package IronPdf

IRONPDFの使用

通常の複雑さなしでSelenium WebDriver C#でPDFファイルを読み取る方法

Curtis Chau

Updated: 2026年4月23日

ブラウザーの新しいタブでPDFドキュメントを開くことは、Blazor webアプリケーションでよくある要件です。このチュートリアルでは、IronPDFを使ってPDFを生成し、JavaScriptインターオプを使って新しいタブに表示する方法を示します。この例では、Blazor Serverバージョンに焦点を当てています。

前提条件とセットアップ

まず、Visual Studio 2022で新しいBlazor Serverプロジェクトを作成します。NuGetパッケージマネージャーコンソールを介してIronPDFをインストールします。

PM > Install-Package IronPdf

Install-Package IronPdf

Program.csでIronPDFライセンスを設定し、フル機能を有効にしてください：

License.LicenseKey = "YOUR-LICENSE-KEY";

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.

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サーバーからBase64文字列としてPDFデータを受け取り、クライアント側コードがそれをバイナリの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

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バイト配列を@inject IJSRuntime JSを使用してJavaScript関数を呼び出し、ユーザーのためにドキュメントを開きます。

UI出力

IronPDFを使用して新しいタブでBlazor PDFを開く：開発者チュートリアル：画像1 - 基本UIの例

新しいタブでPDFを開いた場合の出力

IronPDFを使用して新しいタブでBlazor PDFを開く：開発者チュートリアル：画像2 - 新しいタブで開かれた最初の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");
}

GenerateFromHtmlメソッドは、既存のURLではなく、動的に生成されたHTMLマークアップからIronPDFがPDFを生成する方法を示しています。それは、見出し、コンテンツ、および動的データを含む完全なHTML文字列を構築します。動的コンテンツ生成の答えはRenderHtmlAsPdfメソッドです。

更新されたBlazor Server UI

IronPDFを使用して新しいタブでBlazor PDFを開く：開発者チュートリアル：画像3 - サーバープロジェクトのための更新された例UI

新しいブラウザータブで開かれたPDF

IronPDFを使用して新しいタブでBlazor 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

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.

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がブロックされるのを防ぐために、非同期/待機パターンを使用してください。 3. **ユーザー体験:**生成中に読み込みインジケーターを表示し、ポップアップブロッカーのシナリオを丁寧に処理してください。 4.DOMの操作：サーバー上のC#はクライアントのDOMを直接操作できないことを覚えておいてください；これが、JS InterOpが不可欠な理由です。新しいウィンドウの高さまたは幅を手動で設定する必要はありません。ブラウザーがPDFビューアを処理します。 5.セキュリティ: PDFを生成する前にユーザー入力を検証し、サニタイズする

結論

IronPDFの強力なPDF生成機能とBlazor for JavaScript InterOpを組み合わせることで、新しいブラウザのタブでPDFを開くための堅牢なソリューションを提供します。このアプローチにより、開発者は.NET技術でMicrosoftが構築したモダンなBlazorアプリケーションとシームレスに統合する動的でプロフェッショナルなPDFドキュメントを作成できます。

BlazorプロジェクトでPDF機能を実装する準備はできましたか? 今すぐIronPDFの無料トライアルを開始してください。トライアルには透かしのないフル機能と成功を確実にするための包括的なサポートが含まれています。

Curtis Chau

今すぐエンジニアリングチームとチャット

テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

...

詳しく読む