Blazor ile IronPDF kullanarak yeni bir Sekmeye PDF Ac: Geliştirici Rehberi

Önkoşullar ve Kurulum

Visual Studio 2022'de yeni bir Blazor Sunucu projesi oluşturarak başlayın. IronPDF'yi NuGet Paket Yöneticisi Konsol'u aracılığıyla yükleyin:

Install-Package IronPdf

Tam işlevsellik sağlamak için IronPDF lisansınızı Program.cs dosyanızda yapılandırın:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Zorluğu Anlamak

Blazor Sunucu uygulamaları, C# kodu ile sunucudan tarayıcı sekmelerini doğrudan manipüle edemez. Blazor'un yeni sekmede PDF açma görevi, sunucu tarafındaki PDF oluşturmayı istemci tarafında pencere yönetimi ile birleştirmek için JavaScript InterOp (JS interop) gerektirir.

IronPDF, geliştiricilere sunucuda yuksek kaliteli PDF belgeleri oluşturma imkani tanir, ardindan JavaScript'in window.open() ozelligi kullanilarak görüntülenebilir. Bu yaklaşım, bir net uygulamasında yaygın bir istemci-sunucu problemini çözmek anlamına gelir.

Blazor Web Uygulamanızda JavaScript İşlevleri Uygulama

Yeni tarayıcı sekmelerinde PDF görüntüleme işlemini işlemek için bu JavaScript kodunu _Host.cshtml dosyanıza ekleyin. Bu modül istemci tarafında pencere yönetiminden sorumludur:

<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 fonksiyonu, sunucudan yeni bir sekme acma zorlugunu cozmek icin çok onemlidir. Blazor sunucusundan PDF verilerini bir Base64 dizgi olarak alir ve istemci tarafindaki kod, bunu bir ikili Blob nesnesine cevirir.

Bu blob daha sonra geçici bir URL oluşturmak için kullanılır ve nihayetinde PDF'yi yeni bir sekmede açmak için window.open(blobUrl, '_blank')'a iletilir.

Blazor Bileşeni Oluşturma

PDF'ler oluşturan ve onları yeni sekmelerde açan bir Razor bileşeni oluşturun. Bu çözümün ana şablonu olarak hizmet eder:

@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

Bu kod bloğu ana etkileşimli sayfayı tanımlar. Razor işaretlemesi, URL giriş alanı ve bir düğme ile basit bir kullanıcı arayüzü oluşturur. C# @code bloğu mantığı işler: düğmeye basıldığında, kullanıcının sağladığı URL'den PDF oluşturmak için ChromePdfRenderer örneği kullanır.

Sonrasinda elde edilen PDF bayt dizisini bir Base64 dizgisine dönüştürur ve JavaScript fonksiyonunu cagirmak icin @inject IJSRuntime JS kullanir, kullanıcı icin belgeyi acar.

Dinamik HTML İçerikleri ile Çalışma

URL yerinde dinamik içerikten PDF oluşturmak icin yaklasiminizi RenderHtmlAsPdf kullanacak sekilde değiştirin:

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 yöntemi, IronPDF'in mevcut bir URL yerine dinamik olarak oluşturulan HTML istemi kullanarak PDF oluşturabilecegini gösterir. Bir başlık, içerik ve dinamik veri içeren tam bir HTML dizisi oluşturur. Dinamik içerik oluşturma cevabi, RenderHtmlAsPdf metodudur.

Ortak Sorunlarla Mücadele

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

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

services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration

Gezinme Alternatifleri

JavaScript arayüzü dışında, PDF'leri statik dosya ara yazılımı üzerinden sunabilir ve alternatif bir gezinme seçeneği olarak standart HTML bağlantı etiketlerini kullanabilirsiniz:

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

Bu yaklaşım önceden oluşturulmuş PDF'ler için iyi çalışır, ancak JS InterOp yönteminin dinamik oluşturma yeteneklerinden yoksundur.

En İyi Uygulamalar

1. Hata Yönetimi: PDF oluşturmayı her zaman try-catch bloklarına sarın ve bir sorun meydana geldiğinde kullanıcılara anlamlı hata mesajları sunun.
2. Performans: PDF oluşturma sırasında UI bloke etmeyi önlemek için async/await desenlerini kullanın.
3. Kullanıcı Deneyimi: Oluşturma sırasında yükleme göstergeleri gösterin ve pop-up engelleyici senaryolarını nazikçe ele alın.
4. DOM Manipülasyonu: Unutmayın, sunucuda C# doğrudan istemcinin DOM'unu manipüle edemez; bu nedenle JS InterOp esastır. Yeni pencerenin yüksekliğini veya genişliğini manuel olarak ayarlamanıza gerek yoktur; tarayıcı PDF görüntüleyicisini işler.
5. Güvenlik: PDF oluşturmadan önce kullanıcı girdisini doğrulayın ve temizleyin

Sonuç

IronPDF'nin güçlü PDF oluşturma yeteneklerini Blazor'un JavaScript InterOp ile birleştirmek, yeni tarayıcı sekmelerinde PDF açma için sağlam bir çözüm sağlar. Bu yaklaşım, geliştiricilerin Microsoft'un .NET teknolojisi üzerine kurulu modern Blazor uygulamalarıyla sorunsuz bir şekilde entegre olan dinamik, profesyonel PDF belgeleri oluşturmasına olanak tanır.

Blazor projenizde PDF işlevselliği uygulamaya hazır mısınız? Ücretsiz IronPDF denemesine bugün başlayın. Deneme, başarıyı sağlamak için eksiksiz destekle birlikte işlevselliği tam olarak sürdürür ve filigran içermez.