Blazor 프로젝트에 필요한 사전 준비 사항은 무엇입니까?

Visual Studio 2022에서 새 Blazor Server 프로젝트를 생성하여 시작하십시오. NuGet 패키지 관리자 콘솔을 통해 IronPDF를 설치하십시오:

Install-Package IronPdf

IronPDF 라이선스를 Program.cs에 구성하여 전체 기능을 활성화하십시오:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

모든 기능을 사용하려면 라이센스 키를 적용해야 합니다. IronPDF는 Blazor 서버 애플리케이션과 원활하게 작동하여 현대 웹 애플리케이션을 위한 견고한 PDF 생성 기능을 제공합니다. IronPDF에 익숙하지 않다면, 빠른 시작 가이드를 확인하여 기본 사항을 익히세요.

Blazor는 왜 직접적으로 새로운 탭에서 PDF를 열 수 없는가?

Blazor Server 응용 프로그램은 서버의 C# 코드에서 브라우저 탭을 직접 조작할 수 없습니다. Blazor에서 새로운 탭으로 PDF를 열기 위해서는 서버 측 PDF 생성과 클라이언트 측 창 관리를 연결하기 위해 JavaScript interop(JS interop)이 필요합니다.

IronPDF는 개발자가 서버에서 고품질 PDF 문서를 생성할 수 있도록 하며, 이후 JavaScript의 window.open() 기능을 사용하여 표시할 수 있습니다. 이 접근 방식은 .NET 애플리케이션의 일반적인 클라이언트-서버 경계 문제를 해결합니다. 라이브러리의 Chrome 렌더링 엔진은 문서의 시각적 무결성을 유지하면서 픽셀 완벽한 HTML에서 PDF로 변환을 보장합니다.

Blazor와 IronPDF를 다룰 때, JavaScript 실행은 클라이언트 측에서 수행되며 PDF 생성은 서버 측에서 수행된다는 것을 이해하는 것이 중요합니다. 이 분리는 창 관리 작업을 위해 JavaScript interop의 사용을 필요로 합니다.

내 Blazor 웹 앱에서 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 객체로 변환합니다. 이 접근 방식은 PDF를 Base64로 변환하는 것과 유사하지만 역방향으로, 브라우저가 PDF 콘텐츠를 표시할 수 있게 합니다.

그런 다음 이 blob은 임시 URL을 생성하는 데 사용되며, 최종적으로 window.open(blobUrl, '_blank')에 전달되어 브라우저가 새로운 탭에서 PDF를 열도록 합니다. blob URL 기법은 서버 측 파일 저장이 필요 없이 메모리에서 PDF를 로드할 때 주로 사용됩니다.

향상된 보안이 필요한 애플리케이션의 경우, 문서를 클라이언트에 전송하기 전에 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>
    <input @bind="targetUrl" class="form-control" />
</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 = "___PROTECTED_URL_69___";
    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 블록은 논리를 처리합니다: 버튼이 클릭되면 사용자 제공 URL에서 PDF를 생성하기 위해 ChromePdfRenderer 인스턴스를 사용합니다. 렌더링 옵션을 통해 여백을 커스터마이즈하고, JavaScript 렌더링을 활성화하며, 동적 콘텐츠를 위한 렌더 딜레이를 설정할 수 있습니다.

그런 다음 결과로 나온 PDF 바이트 배열을 Base64 문자열로 변환하고 @inject IJSRuntime JS를 사용하여 JavaScript 함수를 호출하여 사용자를 위해 문서를 엽니다. 이 패턴은 웹 애플리케이션에서 URL을 PDF로 변환할 때 특히 유용합니다. 더 복잡한 시나리오에서는 더 나은 성능을 위해 비동기 PDF 생성을 구현하고자 할 수 있습니다.

사용자 지정 로깅을 구현하여 PDF 생성 활동을 추적하고 문제를 해결하는 것을 고려하세요. 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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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 메서드는 IronPDF가 기존 URL 대신 동적으로 생성된 HTML 마크업에서 PDF를 생성하는 방법을 보여줍니다. 이는 제목, 콘텐츠 및 동적 데이터가 포함된 완전한 HTML 문자열을 구성합니다. RenderHtmlAsPdf 메서드는 변환을 원활하게 처리합니다. 이 접근 방식은 데이터베이스 또는 API의 동적 데이터를 사용하여 PDF 보고서 생성에 적합합니다.

HTML 콘텐츠를 사용자 정의 폰트, 반응형 CSS, 심지어 매입 이미지로 강화할 수 있습니다 DataURIs를 사용하여. 복잡한 레이아웃의 경우, Bootstrap과 Flexbox를 사용하여 일관된 렌더링을 보장하는 것을 고려하세요.

국제 언어를 다룰 때, IronPDF는 다른 언어와 스크립트에서도 올바른 문자 렌더링을 보장하기 위한 탁월한 유니코드 지원을 제공합니다. 또한 페이지 나누기를 제어하고, 사용자 정의 용지 크기를 구현하여 특수한 문서 요건을 충족할 수 있습니다.

일반적인 문제를 어떻게 처리하나요?

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData

        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

어떤 대체 탐색 방법을 사용할 수 있나요?

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 상호 운용 방법의 동적 생성 기능은 부족합니다. 더 발전된 시나리오에서는 전용 PDF 보기 구성 요소를 구현하거나 MemoryStream을 사용하여 디스크에 저장하지 않고 PDF를 제공하는 것을 고려하십시오.

Azure Blob Storage와 같은 클라우드 스토리지에 PDF를 저장하여 더 나은 확장성을 탐색할 수 있습니다. 오프라인 액세스가 필요한 애플리케이션에 대해서는 새로운 탭 기능과 함께 PDF 다운로드 기능을 구현하는 것을 고려하십시오.

어떤 모범 사례를 따라야 하나요?

1. 오류 처리: 의미 있는 오류 메시지가 있는 try-catch 블록에 PDF 생성을 감싸십시오. 맞춤 오류 로깅을 사용하여 문제를 추적하십시오.

2. 성능: UI 차단을 방지하기 위해 async/await를 사용하십시오. JavaScript가 많은 페이지에 대한 렌더링 지연을 구현하십시오. 빠른 초기 렌더링을 위해 엔진을 예열하십시오.

3. 사용자 경험: 로딩 표시기를 표시하고 팝업 차단기를 우아하게 처리하십시오. 다중 페이지 PDF에 대한 진행 상태를 추적하십시오. 네트워크 문제에 대한 명확한 피드백을 제공하십시오.

4. DOM 조작: 서버 측 C#은 클라이언트 DOM을 직접 조작할 수 없음을 기억하십시오. 복잡한 상호작용을 위한 JavaScript 메시지 청취자를 사용하십시오.

5. 보안: PDF 생성을 위해 모든 사용자 입력을 검증하십시오. PDF 정화, 디지털 서명, 암호화를 필요에 따라 적용하십시오. HTTPS를 사용하여 안전한 전송을 하십시오.

6. 리소스 관리: PDF 문서를 적절히 처리하고 메모리 누수를 방지하십시오. 최적화된 컨테이너화된 배포를 위해 패키지 크기를 모니터링하십시오.

결론

IronPDF의 강력한 PDF 생성 기능을 Blazor의 JavaScript 상호 운용과 결합하면 새 브라우저 탭에서 PDF를 여는 견고한 솔루션을 제공합니다. 이 방법은 개발자가 현대의 Blazor 애플리케이션과 원활히 통합되는 동적이고 전문적인 PDF 문서를 만들 수 있게 합니다. HTML을 PDF로 변환하든, 양식을 생성하든, 복잡한 문서를 구성하든, IronPDF는 기업 수준의 PDF 처리를 위한 도구를 제공합니다.

Blazor 프로젝트에서 PDF 기능을 구현할 준비가 되셨습니까? 오늘 IronPDF 체험판을 시작하십시오. 체험판에는 워터마크 없이 전체 기능과 성공을 보장하기 위한 포괄적인 지원이 포함되어 있습니다. 생산 배포를 위해서는 라이선싱 옵션과 배포 가이드를 탐색하여 Windows, Linux, Azure를 포함하는 다양한 플랫폼을 지원하십시오.