Blazorで新しいタブにPDFを開く方法

必須条件とセットアップ

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

Install-Package IronPdf

Program.csでIronPDFライセンスを設定して、完全な機能を有効にします。

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

課題の理解

Blazor Serverアプリケーションはサーバー上のC#コードから直接ブラウザーのタブを操作できません。 BlazorでPDFを新しいタブで開くタスクには、サーバー側のPDF生成とクライアント側のウィンドウ管理をつなぐJavaScriptインターオップ（JSインターオップ）が必要です。

IronPDFを使用すると、開発者はサーバー上で高品質のPDFドキュメントを生成でき、その後JavaScriptのwindow.open()機能を使用して表示できます。 このアプローチは、.NETアプリケーションにおける一般的なクライアントサーバー問題を解決することを意味します。

Blazor WebアプリでのJavaScript関数の実装

ブラウザーの新しいタブでPDFを表示するために、このJavaScriptコードを_Host.cshtmlファイルに追加します。 これはクライアント側のウィンドウ管理を担当するモジュールです。

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

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
            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;
        }
    }
}

このコードブロックはメインのインタラクティブページを定義します。 Razorマークアップは、URL入力フィールドとボタンを持つ簡単なユーザーインターフェイスを作成します。 C#@codeブロックはロジックを処理します: ボタンがクリックされると、ChromePdfRendererインスタンスを使用してユーザーが提供したURLからPDFを生成します。

次に生成されたPDFバイト配列をBase64文字列に変換し、@inject IJSRuntime JSを使用してJavaScript関数を呼び出し、ドキュメントをユーザーのために開きます。

動的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");
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

一般的な問題の処理

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

IRON VB CONVERTER ERROR developers@ironsoftware.com

ナビゲーションの代替手段

JavaScriptインターオップの代わりに、静的ファイルミドルウェアを介してPDFを提供し、標準のHTMLアンカータグを使用することで、他のナビゲートオプションが得られます:

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

このアプローチは事前に生成されたPDFにはうまく機能しますが、JSインターオップメソッドの動的生成機能を欠いています。

ベストプラクティス

1. エラーハンドリング:常にPDF生成をtry-catchブロックでラップし、問題が発生した場合にはユーザーに有意味なエラーメッセージを提供してください。

2. パフォーマンス:PDF生成中のUIブロックを防ぐためにasync/awaitパターンを使用してください。

3. ユーザー体験:生成中に読み込みインジケーターを表示し、ポップアップブロッカーのシナリオを丁寧に処理してください。

4. DOM操作:サーバー上のC#ではクライアントのDOMを直接操作できませんので、 JSインターオップが不可欠である理由です。 新しいウィンドウの高さまたは幅を手動で設定する必要はありません。ブラウザーがPDFビューアを処理します。

5. セキュリティ:PDFを生成する前にユーザー入力を検証およびサニタイズしてください。

結論

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

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