Blazor에서 IronPDF를 사용하여 새 탭에서 PDF 열기: 개발자 튜토리얼
Blazor 웹 애플리케이션에서 새 브라우저 탭에서 PDF 문서를 여는 것은 일반적인 요구 사항입니다. 이 튜토리얼은 IronPDF를 사용하여 PDF를 생성하고 JavaScript interop를 사용하여 새 탭에 표시하여 사용자에게 원활한 문서 뷰잉 경험을 제공하는 방법을 보여줍니다. 이 예시는 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의 PDF 열기 작업은 서버 측 PDF 생성과 클라이언트 측 창 관리의 다리를 제공하는 JavaScript InterOp (JS interop)가 필요합니다.
IronPDF는 개발자가 서버에서 고품질 PDF 문서를 생성할 수 있도록 하며, 이는 JavaScript의 window.open() 기능을 사용하여 표시할 수 있습니다. 이 접근 방식은 순수한 애플리케이션에서의 일반적인 클라이언트-서버 문제를 해결하는 것을 의미합니다.
귀하의 Blazor 웹 앱에서 JavaScript 함수 구현하기
새 브라우저 탭에서 PDF를 처리하기 위해 _Host.cshtml 파일에 이 JavaScript 코드를 추가하십시오. 다음은 클라이언트 측 창 관리를 담당하는 모듈입니다:
<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 서버에서 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
이 코드 블록은 주요 상호작용 페이지를 정의합니다. 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 메소드는 기존 URL 대신 동적으로 생성된 HTML 마크업에서 IronPDF가 PDF를 생성하는 방법을 보여줍니다. 이는 제목, 콘텐츠 및 동적 데이터가 포함된 완전한 HTML 문자열을 구성합니다. 동적 콘텐츠 생성에 대한 답은 RenderHtmlAsPdf 메소드입니다.
업데이트된 Blazor 서버 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 방법의 동적 생성 기능이 부족합니다.
모범 사례
- 오류 처리: 항상 PDF 생성 시 try-catch 블록으로 감싸고 문제가 발생할 경우 사용자에게 의미 있는 오류 메시지를 제공하십시오.
- 성능: PDF 생성 중 UI 차단을 방지하기 위해 async/await 패턴을 사용하십시오.
- 사용자 경험: 생성 중 로딩 표시기를 보여주고 팝업 차단기 시나리오를 우아하게 처리하십시오.
- DOM 조작: 서버의 C#은 클라이언트의 DOM을 직접 조작할 수 없음을 기억하십시오. 이것이 JS InterOp가 필수적인 이유입니다. 새 창의 높이 또는 너비를 수동으로 설정할 필요는 없으며, 브라우저가 PDF 뷰어를 처리합니다.
- 보안: PDF를 생성하기 전에 사용자 입력을 확인하고 정화하십시오.
결론
IronPDF의 강력한 PDF 생성 기능과 Blazor의 JavaScript InterOp를 결합하여 새 브라우저 탭에서 PDF를 여는 강력한 솔루션을 제공합니다. 이 접근 방식은 개발자가 Microsoft의 .NET 기술에 기반하여 구축된 최신 Blazor 애플리케이션과 원활하게 통합되는 동적이고 전문적인 PDF 문서를 생성할 수 있게 합니다.
Blazor 프로젝트에서 PDF 기능을 구현할 준비가 되셨습니까? 무료 IronPDF 체험판을 시작하세요. 체험판에는 워터마크 없이 전체 기능과 성공을 보장하기 위한 포괄적인 지원이 포함되어 있습니다.
자주 묻는 질문
Blazor를 사용하여 새 탭에서 PDF를 열 수 있는 방법은 무엇인가요?
IronPDF로 PDF를 생성하고 JavaScript 상호운용을 활용하여 그것을 새 탭에서 표시함으로써 Blazor를 사용하여 PDF를 새 탭에서 열 수 있습니다. 이 방식은 문서 보기 시 매끄러운 사용자 경험을 보장합니다.
Blazor에서 JavaScript 상호운용이란 무엇인가요?
Blazor의 JavaScript 상호운용은 Blazor 애플리케이션이 .NET 코드에서 JavaScript 함수를 호출할 수 있도록 하고 반대도 가능합니다. 이는 브라우저-특화 작업을 처리할 수 있는 JavaScript가 유용한 새 탭에서 PDF를 여는 작업에 유용합니다.
Blazor에서 PDF 생성을 위해 IronPDF를 사용하는 이유는 무엇인가요?
IronPDF는 Blazor 애플리케이션에서 PDF를 생성하는 효율적인 도구입니다. 매끄러운 PDF 생성과 조작을 가능하게 하는 강력한 기능을 제공하며, Blazor의 JavaScript 상호운용과 쉽게 통합하여 문서 처리를 향상시킬 수 있습니다.
IronPDF는 Blazor 서버와 호환되나요?
네, IronPDF는 Blazor 서버와 완전히 호환됩니다. PDF를 생성하고 관리하는 데 사용할 수 있으며, JavaScript 상호운용을 통해 새 탭에서 열 수 있습니다.
Blazor 애플리케이션에서 PDF를 새 탭에서 여는 것의 이점은 무엇인가요?
PDF를 새 탭에서 열면 사용자가 현재 페이지를 나가지 않고 문서를 볼 수 있어 사용자 경험이 향상됩니다. IronPDF 및 JavaScript 상호 운영을 지원하는 이 방법은 보다 상호작용적이고 끊김 없는 브라우징 세션을 보장합니다.


