IRONPDFの使用 Blazor IronPDFでPDFを新しいタブで開く:開発者向けチュートリアル カーティス・チャウ 更新日:2025年12月4日 IronPDF をダウンロード NuGet ダウンロード DLL ダウンロード Windows 版 無料トライアル LLM向けのコピー LLM向けのコピー LLM 用の Markdown としてページをコピーする ChatGPTで開く このページについてChatGPTに質問する ジェミニで開く このページについてGeminiに問い合わせる Grokで開く このページについてGrokに質問する 困惑の中で開く このページについてPerplexityに問い合わせる 共有する Facebook で共有 Xでシェア(Twitter) LinkedIn で共有 URLをコピー 記事をメールで送る ブラウザーの新しいタブで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" $vbLabelText $csharpLabel 課題の理解 Blazor Serverアプリケーションはサーバー上のC#コードから直接ブラウザーのタブを操作できません。 Blazor open PDF in new tabのタスクは、サーバーサイドのPDF生成とクライアントサイドのウィンドウ管理の橋渡しをするJavaScript InterOp (JS interop)を必要とします。 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. $vbLabelText $csharpLabel 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 $vbLabelText $csharpLabel このコードブロックはメインのインタラクティブページを定義します。 Razorマークアップは、URL入力フィールドとボタンを持つ簡単なユーザーインターフェイスを作成します。 C#の@codeブロックがロジックを処理します:ボタンがクリックされると、ChromePdfRendererインスタンスを使用して、ユーザーが提供したURLからPDFを生成します。 次に、結果のPDFバイト配列をBase64文字列に変換し、@inject IJSRuntime JSを使ってJavaScript関数を呼び出し、ユーザーのために文書を開きます。 UI出力 Blazor IronPDFで新しいタブでPDFを開く:開発者向けチュートリアル:画像1 - 基本的なUIの例。 新しいタブでPDFを開いた場合の出力 Blazor IronPDFで新しいタブで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"); } 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 $vbLabelText $csharpLabel GenerateFromHtmlメソッドは、既存のURLの代わりに動的に生成されたHTMLマークアップからIronPDFがPDFを生成する方法を示しています。 それは、見出し、コンテンツ、および動的データを含む完全なHTML文字列を構築します。 動的コンテンツ生成の答えは、RenderHtmlAsPdfメソッドです。 更新されたBlazor Server UI Blazor IronPDFで新しいタブでPDFを開く:開発者向けチュートリアル:画像3 - サーバープロジェクトのUI例を更新しました。 新しいブラウザータブで開かれた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 $vbLabelText $csharpLabel ナビゲーションの代替手段 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. $vbLabelText $csharpLabel このアプローチは、事前に生成されたPDFに対してはうまく機能しますが、JS InterOpメソッドの動的生成機能には欠けています。 ベストプラクティス 1.エラー処理: PDF生成は常にtry-catchブロックで囲み、問題が発生したときにはユーザーに意味のあるエラーメッセージを提供すること。 2.パフォーマンス: PDF生成中にUIがブロックされるのを防ぐために、非同期/待機パターンを使用してください。 ユーザー体験:生成中に読み込みインジケーターを表示し、ポップアップブロッカーのシナリオを丁寧に処理してください。 4.DOMの操作:サーバー上のC#はクライアントのDOMを直接操作できないことを覚えておいてください; これが、JS InterOpが不可欠な理由です。 新しいウィンドウの高さまたは幅を手動で設定する必要はありません。ブラウザーがPDFビューアを処理します。 5.セキュリティ: PDFを生成する前にユーザー入力を検証し、サニタイズする 結論 IronPDFの強力なPDF生成機能とBlazorのJavaScript InterOpを組み合わせることで、新しいブラウザのタブでPDFを開くための堅牢なソリューションを提供します。 このアプローチにより、開発者は.NET技術でMicrosoftが構築したモダンなBlazorアプリケーションとシームレスに統合する動的でプロフェッショナルなPDFドキュメントを作成できます。 BlazorプロジェクトでPDF機能を実装する準備はできましたか? 今すぐIronPDFの無料トライアルを開始してください。 トライアルには透かしのないフル機能と成功を確実にするための包括的なサポートが含まれています。 よくある質問 Blazorを使用して新しいタブでPDFを開くにはどうすればよいですか? Blazorを使ってPDFを新しいタブで開くには、IronPDFでPDFを生成し、それを新しいタブで表示するためにJavaScriptインターオプを利用します。このアプローチはドキュメント閲覧時のスムーズなユーザーエクスペリエンスを保証します。 BlazorのJavaScriptインターロップとは何ですか? BlazorのJavaScriptインターオプにより、Blazorアプリケーションは.NETコードからJavaScript関数を呼び出したり、逆に.NETコードからJavaScript関数を呼び出すことができます。これは、PDFを新しいタブで開くような、JavaScriptがブラウザ固有の操作を処理するようなタスクに便利です。 BlazorでのPDF生成にIronPDFを使用する理由は? IronPDFはBlazorアプリケーションでPDFを生成するための効率的なツールです。シームレスなPDFの作成と操作を可能にする堅牢な機能を提供し、BlazorのJavaScriptインターオプと簡単に統合してドキュメントのハンドリングを強化することができます。 IronPDFはBlazor Serverと互換性がありますか? はい、IronPDFはBlazor Serverと完全に互換性があります。IronPDFはPDFの生成と管理に使用でき、JavaScriptインターオプを使って新しいタブで開くことができます。 BlazorアプリケーションでPDFを新しいタブで開く利点は何ですか? 新しいタブでPDFを開くと、ユーザーは現在のページから移動することなくドキュメントを見ることができ、ユーザーエクスペリエンスが向上します。IronPdfとJavaScriptの相互運用によってサポートされるこの方法は、よりインタラクティブで中断のないブラウジングセッションを保証します。 カーティス・チャウ 今すぐエンジニアリングチームとチャット テクニカルライター Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。 関連する記事 更新日 2026年1月22日 .NETでIronPDFを使ってPDFドキュメントを作成する方法:完全ガイド C#で開発者向けにPDFファイルを作成する効果的な方法を発見します。コーディングスキルを向上させ、プロジェクトを効率化します。この記事を今すぐお読みください! 詳しく読む 更新日 2026年1月21日 VB.NETでPDFファイルをマージする方法:完全なチュートリアル IronPDF で PDF をマージします。シンプルな VB.NET コードを使用して、複数の PDF ファイルを1つのドキュメントに結合する方法を学びます。ステップバイステップの例が含まれています。 詳しく読む 更新日 2026年1月21日 C# PDFWriter チュートリアル:.NETでPDFドキュメントを作成する このステップバイステップガイドで開発者がC# PDFWriterを使用してPDFを効率的に作成する方法を学びます。記事を読んでスキルを向上させましょう! 詳しく読む PDF SDK:PDFライブラリでPDF機能をマスターする方法IronPDF vs iTextSharp MVC C#でPDF...
更新日 2026年1月22日 .NETでIronPDFを使ってPDFドキュメントを作成する方法:完全ガイド C#で開発者向けにPDFファイルを作成する効果的な方法を発見します。コーディングスキルを向上させ、プロジェクトを効率化します。この記事を今すぐお読みください! 詳しく読む
更新日 2026年1月21日 VB.NETでPDFファイルをマージする方法:完全なチュートリアル IronPDF で PDF をマージします。シンプルな VB.NET コードを使用して、複数の PDF ファイルを1つのドキュメントに結合する方法を学びます。ステップバイステップの例が含まれています。 詳しく読む
更新日 2026年1月21日 C# PDFWriter チュートリアル:.NETでPDFドキュメントを作成する このステップバイステップガイドで開発者がC# PDFWriterを使用してPDFを効率的に作成する方法を学びます。記事を読んでスキルを向上させましょう! 詳しく読む