Blazor Projem İçin Hangi Ön Koşullar Gerekiyor?

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

IronPDF lisansınızı, tam işlevsellik sağlamak için Program.cs içinde yapılandırın:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Bütün özellikleri kullanabilmek için lisans anahtarını uygulamanız gerekecek. IronPDF, Blazor Server uygulamaları ile sorunsuz çalışır, modern web uygulamaları için güçlü PDF oluşturma yetenekleri sunar. IronPDF'e yeniyseniz, temel bilgileri öğrenmek için hızlı başlangıç kılavuzuna göz atın.

Blazor Neden PDF'leri Doğrudan Yeni Sekmelerde Açamaz?

Blazor Sunucu uygulamaları, C# kodu ile sunucudan tarayıcı sekmelerini doğrudan manipüle edemez. Blazor'dan yeni bir sekmede PDF açmak, sunucu tarafı PDF üretimi ile istemci tarafı pencere yönetimini köprülemek için JavaScript etkileşimi (JS etkileşimi) gerektirir.

IronPDF, geliştiricilere sunucuda yüksek kaliteli PDF belgeleri oluşturmalarını sağlar ve bu belgeler JavaScript'in window.open() işlevselliği kullanılarak görüntülenebilir. Bu yaklaşım, .NET uygulamalarındaki yaygın bir istemci-sunucu sınır sorununu çözer. Kütüphanenin Chrome oluşturma motoru, belgelerinizin görsel bütünlüğünü koruyarak piksel mükemmel HTML'den PDF'ye dönüşüm sağlar.

Blazor ve IronPDF ile çalışırken, JavaScript yürütümünün istemci tarafında gerçekleştiğini ve PDF üretiminin sunucuda olduğunu anlamak önemlidir. Bu ayrım, pencere yönetimi görevleri için JavaScript etkileşiminin kullanılmasını gerektirir.

Blazor Web Uygulamamda JavaScript İşlevlerini Nasıl Uygularım?

PDF görüntülemesini yeni tarayıcı sekmelerinde yönetmek için _Host.cshtml dosyanıza bu JavaScript kodunu ekleyin. Bu modül, istemci tarafı pencere işlemlerini yönetir:

<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 fonksiyonu, sunucudan yeni bir sekme açmak için çok önemlidir. Blazor sunucusundan Base64 dizgesi olarak PDF verilerini alır ve istemci tarafında kod, bunu ikili bir Blob nesnesine dönüştürür. Bu yaklaşım, PDF'yi Base64'e dönüştürmek ile benzerdir ancak tersine işlemdir, tarayıcının PDF içeriğini görüntülemesine olanak tanır.

Bu blob daha sonra geçici bir URL oluşturmak için kullanılır ve son olarak tarayıcının PDF'yi yeni bir sekmede açmasını zorlamak için window.open(blobUrl, '_blank')'a iletilir. Blob URL tekniği, sunucu tarafında dosya depolama gerektirmeyen hafızadan PDF'ler yükleme durumlarında yaygın olarak kullanılır.

Daha gelişmiş güvenlik gereksinimleri olan uygulamalar için, belgeyi istemciye iletmeden önce PDF izinleri ve şifreleri uygulamayı düşünün. Dijital imzaları keşfederek belge orijinalliğini sağlayabilirsiniz.

Blazor Bileşeni Nasıl Oluştururum?

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>
    <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;
        }
    }
}

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ığı yönetir: düğmeye tıklandığında, kullanıcı tarafından sağlanan URL'den PDF üretmek için bir ChromePdfRenderer örneği kullanır. Oluşturma seçenekleri, kenar boşluklarını özelleştirmenize, JavaScript oluşturmayı etkinleştirmenize ve dinamik içerik için oluşturma gecikmelerini ayarlamanıza olanak tanır.

Daha sonra ortaya çıkan PDF byte dizisini Base64 dizgesine dönüştürür ve belgeyi kullanıcı için açmak üzere JavaScript fonksiyonunu çağırmak için @inject IJSRuntime JS kullanılır. Bu şema, web uygulamalarında URL'leri PDF'ye dönüştürmek için özellikle kullanışlıdır. Daha karmaşık senaryolarda, daha iyi performans için async PDF oluşturma uygulamayı düşünebilirsiniz.

PDF oluşturma etkinliklerini izlemek ve sorunları çözmek için özel kayıt uygulamayı düşünün. Belgelerinizi geliştirmek için ayrıca filigranlar veya başlıklar ve altbilgiler ekleyebilirsiniz.

Dinamik HTML İçeriğiyle Nasıl Çalışırım?

URL'ler yerine dinamik içerikten PDF oluşturmak için yaklaşımınızı RenderHtmlAsPdf kullanmak üzere 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; }}
                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 metodu, mevcut bir URL yerine dinamik olarak oluşturulmuş HTML işaretlemesinden PDF oluşturmanın nasıl mümkün olduğunu gösterir. Bir başlık, içerik ve dinamik veri içeren tam bir HTML dizisi oluşturur. RenderHtmlAsPdf metodu, dönüşümü sorunsuz bir şekilde yönetir. Bu yaklaşım, veritabanlarından veya API'lerden alınan dinamik verilerle PDF raporları oluşturmak için mükemmeldir.

Özel yazı tipleri, duyarlı CSS ve hatta eklenmiş resimlerle HTML içeriğinizi DataURIs kullanarak geliştirebilirsiniz. Karmaşık düzenler için, tutarlı bir görselleştirme sağlamak amacıyla Bootstrap ve Flexbox kullanmayı düşünün.

Uluslararası diller ile çalışırken, IronPDF farklı diller ve yazılar arasında doğru karakter görselleştirmesini sağlamak için mükemmel Unicode desteği sunar. Özel belgeler için sayfa sonlarını kontrol edebilir ve özel kağıt boyutları uygulayabilirsiniz.

Hangi Ortak Sorunları Yönetmeliyim?

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

Hangi Gezinme Alternatiflerini Kullanabilirim?

JavaScript etkileşimi dışında, PDF'leri statik dosya arayüzü aracılığıyla sunabilir ve alternatif navigasyon için standart HTML köprü etiketlerini kullanabilirsiniz:

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

Bu yaklaşım, önceden oluşturulmuş PDF'ler için iyi çalışır ancak JK etkileşim yönteminin dinamik üretim yeteneklerinden yoksundur. Daha gelişmiş senaryolar için özel bir PDF görüntüleme bileşeni uygulamayı düşünün veya diske kaydetmeden PDF'leri sunmak için MemoryStream kullanın.

PDF'leri bulut depolamaya kaydetmeyi araştırarak daha iyi ölçeklenebilirlik için Azure Blob Storage gibi çözümleri değerlendirebilirsiniz. Çevrimdışı erişim gerektiren uygulamalar için, yeni sekme özelliği yanında PDF indirme işlevselliği uygulamayı düşünün.

Hangi En İyi Uygulamaları Takip Etmeliyim?

1. Hata Yönetimi: Anlamlı hata mesajları ile PDF oluşturmayı try-catch blokları içinde sarın. Sorunları özel hata kaydı kullanarak izleyin.

2. Performans: UI kilitlenmesini önlemek için async/await kullanın. JavaScript ağırlıklı sayfalar için oluşturma gecikmeleri uygulayın. Daha hızlı ilk renderlar için motoru önceden ısıtın.

3. Kullanıcı Deneyimi: Yükleme göstergeleri gösterin ve açılır pencere engelleyicileri zarifçe yönetin. Çok sayfalı PDF'ler için ilerlemeyi izleyin. Ağ sorunları için net geri bildirim sağlayın.

4. DOM Manipülasyonu: Sunucu tarafı C#'ın doğrudan istemci DOM'unu manipüle edemeyeceği unutulmamalıdır. Karmaşık etkileşimler için JavaScript mesaj dinleyicileri kullanın.

5. Güvenlik: PDF oluşturulmadan önce tüm kullanıcı girişini doğrulayın. PDF temizliği, dijital imzalar ve gerekli şifreleme uygulayın. Güvenli iletim için HTTPS kullanın.

6. Kaynak Yönetimi: PDF belgelerini düzgünce imha edin ve hafıza sızıntılarını önleyin. Paket boyutunu izleyin ve optimize edilmiş containerized dağıtımlar için izleyin.

Sonuç

IronPDF'in güçlü PDF oluşturma yeteneklerini Blazor'un JavaScript etkileşimi ile birleştirmek, yeni tarayıcı sekmelerinde PDF açmak için sağlam bir çözüm sunar. Bu yaklaşım, geliştiricilerin modern Blazor uygulamalarıyla sorunsuz biçimde entegre olan dinamik, profesyonel PDF belgeleri oluşturarak olanak sağlar. HTML'yi PDF'ye dönüştürme, form oluşturma, veya karmaşık belgeleri düzenleme olsun, IronPDF kurumsal düzeyde PDF yönetimi için gereken araçları sunar.

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. Üretim dağıtımları için çeşitli platformlar, dahil Windows, Linux ve Azure, için lisanslama seçeneklerimizi ve dağıtım kılavuzlarımızı keşfedin.