IRONSOFTWAREHOME
IRONPDFの使用

C# PDF Receipts and Transaction Records for FinTech Apps

Curtis Chau
Curtis Chau
Updated: 2026年6月20日

Blazorアプリケーションで PDF を表示するには、IronPDF の PDF ビューアー コンポーネントを使用します。このコンポーネントはBlazor Server アプリと統合されており、フォームの入力、注釈、モバイル サポートなどの機能を備えた高性能な PDF レンダリングを提供します。これらはすべてサードパーティのブラウザー ツールに依存することなく実現されます。

Blazorアプリケーションに専用の PDF ビューアが必要なのはなぜですか?

最新の Web アプリケーションで PDF を表示するには、基本的なブラウザ機能を超える信頼性の高いビューア コンポーネントが必要です。 Blazorアプリケーションを構築する.NET開発者向けに、 IronPDF はBlazor Server アプリと統合する効果的な PDF ビューア ソリューションを提供します。 これにより、サードパーティのブラウザ ツールに依存せずに、高性能な PDF レンダリングと豊富な機能を実現できます。

ネイティブ ブラウザーの PDF サポートはブラウザーやプラットフォームによって大きく異なるため、ユーザー エクスペリエンスに一貫性がなくなります。 Blazorアプリケーションにカスタム PDF ビューアを実装することで、表示エクスペリエンスを完全に制御できるようになり、すべてのプラットフォームで一貫した機能が確保されます。 これは、コンプライアンス標準と高度なセキュリティ機能を必要とするアプリケーションにとって特に重要です。

Microsoft のASP.NET Core上に構築されたBlazorフレームワークを使用すると、PDF 操作ライブラリと自然に組み合わせるコンポーネント ベースの開発が可能になります。 外部 CDN からサードパーティのビューアー ウィジェットを埋め込むのではなく、アプリケーションの正確な要件に合わせてカスタマイズされたコンポーネントを構築できます。

BlazorプロジェクトにIronPDFをインストールするにはどうすればよいでしょうか?

Blazor PDF ビューアを実装する前に、 IronPDFをインストールします。 パッケージ マネージャー コンソールまたは.NET CLI を使用して、 NuGet経由でBlazor Server アプリに追加します。

PM > Install-Package IronPdf

dotnet add package IronPdf

次に、新しいBlazorアプリケーションを作成し、最新バージョン for .NETがインストールされていることを確認します。 PDFファイルをwwwrootフォルダに保存して簡単にアクセスするか、バイト配列やURLなど他のソースからロードします。 インストールの概要では、さまざまな展開シナリオに関する詳細なガイダンスが提供されます。

どのような前提条件が必要ですか?

Blazor PDF ビューアーを正常に実装するには、次のものを用意してください。

  • 開発マシンに**.NET 10**がインストールされている
  • Visual Studio 2022または C# 拡張機能を備えた Visual Studio Code
  • IronPDFライセンスキー無料トライアルで入手可能)
  • Blazorコンポーネント構造の基本的な理解
  • テスト用のサンプルPDFファイルwwwrootフォルダに配置してください)

Windows 展開の場合は、適切な Visual C++ ランタイムがインストールされていることを確認してください。Linux ユーザーは必要な依存関係をインストールする必要があります。一方、macOS 開発者は Intel と Apple Silicon の互換性を考慮する必要があります。

PDF ファイルはどこに保存すればよいですか?

PDF ファイルの保存場所は、アプリケーションのパフォーマンスとセキュリティに大きな影響を与えます。 Blazorアプリケーションの場合、次のオプションを検討してください。

  • wwwroot フォルダ: 機密情報のない静的 PDF に最適
  • Azure BLOB ストレージ : 柔軟なストレージを必要とするクラウド アプリケーション向け -バイト配列としてのデータベース: アクセス制御を必要とする小さなPDFに適しています -保護されたサーバーディレクトリ: セキュリティ要件のある機密文書に最適 -メモリストリーム: HTML to PDFを使用して動的に生成される PDF に最適

Blazor PDF ビューアー コンポーネントを作成するにはどうすればよいですか?

PDF ドキュメントを表示できる基本的なBlazor PDF ビューア コンポーネントを構築します。 プロジェクトに新しいRazorコンポーネントを作成します。

@page "/pdfviewer"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment

<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @if (!string.IsNullOrEmpty(pdfUrl))
        {
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        }
    </div>
</div>

@code {
    private string pdfUrl = "";
    private byte[] pdfData = Array.Empty<byte>();

    private async Task LoadPdfDocument()
    {
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        var base64 = Convert.ToBase64String(pdfData);
        pdfUrl = $"data:application/pdf;base64,{base64}";
    }
}

このコードは、PDF ドキュメントを読み込んで iframe を使用して表示する PDF ビューア コンポーネントを作成します。 wwwrootフォルダからPDFを読み込み、iframeが直接レンダリングできるbase64データURLに変換します。 このアプローチはさまざまな PDF バージョンで適切に機能し、国際ドキュメントの UTF-8 エンコードをサポートします。

コンポーネントは PDF ファイルをどのように読み込みますか?

このコンポーネントは、IronPDF のドキュメント読み込み機能を使用して PDF ファイルを効率的に読み取ります。 ユーザーが"ファイルを開く"ボタンをクリックすると、メソッドは次のようになります。

  1. PdfDocument.FromFileを使用してPDFファイルをロードします
  2. 読み込んだPDF文書からバイナリデータを抽出します
  3. ブラウザ互換性のためにBase64形式に変換します
  4. ブラウザが直接レンダリングできるデータURLを作成する

このアプローチにより、PDF 表示の良好なパフォーマンスを維持しながら、さまざまなブラウザ間の互換性が確保されます。 このコンポーネントは、さまざまな用紙サイズとページの向きを処理できます。

出力

Blazor PDFビューアーコンポーネントのスクリーンショットには、ナビゲーションコントロール、ズームオプション、

JavaScript Interop を使用して PDF の表示を改善する方法

PDF コンテンツの表示をより適切に制御するには、 JavaScript相互運用機能を使用して PDF ビューアー機能を処理します。 このパターンは、 JavaScriptモジュールを非同期的に読み込み、レンダリングをブラウザのネイティブ blob/URL API に委任します。これは、Blazor のコンポーネント ライフサイクルに適した手法です。

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
@implements IAsyncDisposable

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript Blob/ObjectURL capabilities.</p>

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger">Error: @ErrorMessage</div>
}

<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>

@code {
    private string documentId = Guid.NewGuid().ToString();
    private string ErrorMessage = string.Empty;
    private bool pdfLoaded = false;
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                    "import", "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }

    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return;
        var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
        if (!File.Exists(pdfPath))
        {
            ErrorMessage = $"File not found: {pdfPath}";
            return;
        }
        var pdf = PdfDocument.FromFile(pdfPath);
        await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData);
    }

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
            await jsModule.DisposeAsync();
    }
}

対応するJavaScript関数を.jsモジュールとして保存されています:

export function displayPdf(elementId, data) {
    const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const container = document.getElementById(elementId);
    if (!container) return;
    container.innerHTML = '';
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    container.appendChild(iframe);
}

こ for JavaScript関数は、PDF データから BLOB を作成し、オブジェクト URL を生成し、コンテナーに iframe を追加します。 この技術は、複雑なドキュメントのJavaScriptレンダリングとカスタム レンダリング遅延をサポートします。

出力

IronPDF JavaScript Interop Viewerインターフェイスは、

複数のソースから PDF を読み込むにはどうすればよいでしょうか?

Blazor PDF ビューアは、さまざまなソースから PDF ドキュメントを取得して表示できます。 以下の例は、URL および HTML コンテンツからの読み込みを示しています。

private async Task LoadFromUrl(string url)
{
    using var client = new HttpClient();
    client.Timeout = TimeSpan.FromSeconds(30);
    var response = await client.GetAsync(url);
    response.EnsureSuccessStatusCode();
    var stream = await response.Content.ReadAsStreamAsync();
    var pdfDocument = new PdfDocument(stream);
    await DisplayPdfContent(pdfDocument);
}

private async Task LoadFromHtmlContent()
{
    var renderer = new ChromePdfRenderer();
    var htmlContent = "<h1>Generated PDF</h1><p>Dynamic content from Blazor.</p>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}

private Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
    return Task.CompletedTask;
}

LoadFromHtmlContentHTMLをPDFに変換する方法を示しています。 Chrome レンダリング エンジンにより、正確な HTML 変換が保証されます。 追加のソース オプションには、Azure BLOB ストレージ、データベース メモリ ストリームDOCX ドキュメントなどがあります。

あなたのユースケースに適したソースメソッドはどれですか?

Blazorアプリケーション用の PDF ソース メソッド
ソースタイプ最適な用途パフォーマンスセキュリティ
ローカルファイル静的コンテンツ素晴らしい低い
URL外部文書良い中くらい
HTML変換動的レポート変数高い
BLOB ストレージエンタープライズアプリ素晴らしい高い
メモリストリーム一時的なPDF素晴らしい高い

HTMLコンテンツを使用した出力

IronPDFテストインターフェイスは、HTMLコンテンツからのPDF生成が成功したことを示し、URLからのロードやHTMLからの生成オプションが上部に表示されています。

PDF ビューアにインタラクティブ機能を追加するにはどうすればよいですか?

PDF ビューアをページ ナビゲーション、回転、印刷、ダウンロード機能で拡張します。

@code {
    private int currentPage = 1;
    private int totalPages;
    private byte[] pdfData = Array.Empty<byte>();
    private string pdfUrl = "";
    private string rotationClass = "";
    private string documentId = Guid.NewGuid().ToString();

    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }

    private void RotateCounterclockwise()
    {
        rotationClass = "rotate-270";
    }

    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }

    private async Task DownloadPdf()
    {
        await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf");
    }
}

このコードは、ページナビゲーション、回転印刷ダウンロード機能を追加します。 ナビゲーションが多いドキュメントにはページ番号とブックマークを追加することを検討してください。 高度な機能には、テキスト抽出や PDF から HTML への変換などが含まれる場合があります。

出力

Blazorビルドのフル機能PDFビューアーコンポーネント。ドキュメントナビゲーションコントロール、ズーム機能100%設定、ロードPDFファイル、プリント、ダウンロード、回転オプションなどのカスタムアクションボタンが表示されています

PDF フォームと注釈をどのように処理しますか?

フォーム フィールド注釈を含む PDF ドキュメントの場合、 IronPDF は、プログラムによるフィールド値の読み取りと書き込みを強力にサポートします。

private async Task ProcessFormFields()
{
    var pdfDocument = PdfDocument.FromFile("form.pdf");

    foreach (var field in pdfDocument.Form.Fields)
    {
        if (field.Type == PdfFormFieldType.Text)
        {
            field.Value = "User Input";
        }
    }

    await DisplayPdfContent(pdfDocument);
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");
    var formData = pdfWithFormData.Form.Fields
        .ToDictionary(f => f.Name, f => f.Value);

    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

これにより、 Blazor PDF ビューアー内でフォーム入力機能が有効になり、ユーザーはブラウザー内で直接フォーム フィールドを操作できるようになります。 コードはフォーム フィールドを反復処理し、プログラムによって値を設定します。これは、動的な事前入力を必要とするアプリケーションに最適です。 IronPDF はデジタル署名とテキスト注釈もサポートしています。

サポートされているフィールド タイプには、テキスト入力、チェックボックス、ラジオ ボタン、ドロップダウン リスト、デジタル署名フィールド、複数行テキスト領域、日付ピッカーなどがあります。

プログラムによるフォーム入力とインタラクティブなフォーム入力はいつ使用すべきですか?

フォーム入力アプローチの比較
アプローチ使用する場合印刷された資料をデジタル化することで、教育コンテンツを簡単に共有できます。多言語サポートにより、多様な学生層が学術リソースを利用しやすくなります。
プログラム既知のデータの事前入力より速く、一貫性があり、自動化された
相互の作用ユーザー入力が必要です柔軟で即時の検証
ハイブリッド部分的なデータが利用可能両方のアプローチの長所

改ざんを防ぐために、送信後にフォームをフラット化することを検討してください。 セキュリティのためにPDF サニタイズを使用します。

出力

PDFビューアーコンポーネントのフォーム入力機能の例には、ユーザーがブラウザで直接PDFフォームに対話する方法が示されています

大きな PDF のパフォーマンスを最適化するにはどうすればよいでしょうか?

PDF を表示する際、特に大きなファイルの場合に良好なパフォーマンスを確保するには、チャンク読み込みとメモリ管理を使用します。

private async Task LoadLargePdf()
{
    const int chunkSize = 1024 * 1024; // 1MB chunks
    var pdfPath = "largefile.pdf";

    using var fileStream = File.OpenRead(pdfPath);
    var buffer = new byte[chunkSize];
    var chunks = new List<byte[]>();
    int bytesRead;

    while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
    {
        var chunk = new byte[bytesRead];
        Array.Copy(buffer, chunk, bytesRead);
        chunks.Add(chunk);
    }

    await ProcessPdfChunks(chunks);
}

このアプローチでは、大きな PDF ファイルをチャンクで読み込むため、メモリの問題が防止され、大きなドキュメントでもスムーズなパフォーマンスが保証されます。 これは、モバイル デバイスやリソースが限られたシステム上で PDF ファイルを処理する場合に特に便利です。 追加のチューニング オプションについては、 IronPDF のパフォーマンス ガイドを参照してください。

その他の最適化戦略には、Web を高速に表示するための線形化、ファイル サイズを縮小するための圧縮、複数の PDF を同時に処理するための非同期処理などがあります。 PDF 協会のベスト プラクティスによると、線形化された (Web 向けに最適化された) PDF を使用すると、大きなドキュメントの初期読み込み時間を 30 ~ 60% 短縮できます。

どのファイル サイズにチャンク ロードが必要ですか?

PDFファイルサイズの読み込み戦略ガイド
ファイルサイズ積載戦略メモリへの影響
5 MB未満直接読み込み最小限
5~20MBオプションのチャンク適度
20~50MB推奨チャンク重要な
50MB以上必要なチャンク致命的

サーバー側レンダリングは、100 MB を超える PDF を処理する場合、複雑な注釈を実装する場合、または複数の同時ユーザーをサポートする場合に役立ちます。

パスワードで保護されたファイルに対してBlazor PDF ビューアーをどのように保護しますか?

パスワード保護されたPDFファイルを扱う際は、パスワードをPdfDocument.FromFileに直接渡し、適切なHTTPセキュリティヘッダーを設定してください:

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);

    var headers = new Dictionary<string, string>
    {
        { "X-Frame-Options", "SAMEORIGIN" },
        { "Content-セキュリティ-Policy", "default-src 'self'" },
        { "X-Content-Type-Options", "nosniff" },
        { "Referrer-Policy", "no-referrer" }
    };

    await DisplayPdfContent(pdfDocument);
}

このコードは、適切なヘッダー構成を通じてセキュリティを維持しながら、パスワードで保護された PDF ドキュメントを読み込む方法を示しています。 認証を強化するためにデジタル署名を検討してください。 潜在的に悪意のあるコンテンツを削除し、機密情報を編集するためにPDF サニタイズを実装します。

パスワードを扱うときは、決してプレーンテキストやクライアント側コードで保存しないでください。 適切な検証を伴う安全な入力方法を使用し、機密文書に対してセッション タイムアウトを実装し、使用後はメモリからパスワードを消去します。 Microsoft のASP.NET Coreセキュリティ ガイダンスでは、ユーザーが入力した資格情報を下流の API に渡す前に常に検証およびサニタイズすることを推奨しています。

クライアント側とサーバー側の復号化

PDF復号化アプローチのセキュリティ比較
復号化タイプ使用事例セキュリティレベル
クライアント側公文書低い
サーバー側機密データ高い
ハイブリッド混合コンテンツ中くらい

セキュリティを最大限に高めるには、常にサーバー側で復号化を実行し、復号化されたコンテンツをクライアントに安全にストリーミングします。 長期アーカイブのニーズに対応するためにPDF/A 準拠を実装します。

Blazorで PDF を表示するための重要なポイントは何ですか?

IronPDFを使用してBlazor PDF ビューアを実装すると、開発者は Web アプリケーションで PDF を表示するための完全なソリューションを利用できるようになります。 基本的な表示からフォームの入力や注釈などの高度な機能まで、IronPDF のPDF ビューア コンポーネントは、プロフェッショナル アプリケーションに必要な機能を提供します。

ここに示す例は、さまざまな PDF ソースを処理し、インタラクティブな機能を提供し、優れたパフォーマンスを維持する信頼性の高いBlazor PDF ビューアを作成する方法を示しています。 シンプルなドキュメント ビューアーを構築する場合でも、複雑なドキュメント管理システムを構築する場合でも、IronPDF とBlazor Server アプリの統合により、プロフェッショナルな PDF 表示機能を簡単に実装できます。

主な利点は次のとおりです:

  • すべてのブラウザで一貫したレンダリングを実現するクロスプラットフォームの互換性
  • 機密文書のための**高度なセキュリティ機能**
  • 非同期およびチャンクロードによる大容量ファイルのパフォーマンス最適化
  • デジタル署名を含む完全なフォーム処理機能
  • 既存 for .NETアプリケーションとのスムーズな統合

IronPDF は、Azure、AWS、Docker、従来の Windows 環境をサポートしています。 独自のビューアを構築する準備はできましたか? IronPDFの無料トライアルを開始し、完全なドキュメントコード例を参照して、 Blazorアプリケーションで効果的な PDF 表示エクスペリエンスを作成してください。

Curtis Chau
テクニカルライター

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

...
詳しく読む

関連する記事

Key in blue circle

無料の30日間トライアルキーをすぐに入手してください。

Your trial license will be sent to your email address

制限なし。100% ロック解除済み。クレジットカード不要。

bullet_checkedクレジットカードやアカウントの作成は不要です。制限なし。100% ロック解除済み。クレジットカード不要。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
無料のライブデモを予約する
Booking Badge

世界中の数百万人のエンジニアから信頼されています。

ライセンスはより安く
義務のない相談を受ける
下記のフォームを記入するか、sales@ironsoftware.comにメールしてください。
あなたの詳細は常に守秘されます。
世界中の数百万人のエンジニアから信頼されています。
ライセンスはより安く
あなたの無料30日間の試用キーをすぐに入手。
クレジットカードやアカウントの作成は不要です。