Altbilgi içeriğine atla
IRONPDF KULLANARAK

IronPDF Kullanarak C#'ta PDF'i Bayt Dizisine Cevirme

Blazor web uygulamaları için PDF belgelerini yeni bir tarayıcı sekmesinde açmak yaygın bir gerekliliktir. Bu eğitim, PDF'leri IronPDF kullanarak nasıl oluşturacağınızı ve kullanıcı deneyimini kesintisiz hale getirmek için JavaScript interopu kullanarak yeni sekmelerde nasıl görüntüleyeceğinizi gösterir. Bu örnek, Blazor Server sürümüne odaklanmaktadır.

Ön Koşullar ve Kurulum

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

Install-Package IronPdf

Tam işlevselliği etkinleştirmek için IronPDF lisansınızı Program.cs dosyasında yapılandırın:

License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY";
License.LicenseKey = "YOUR-LICENSE-KEY"
$vbLabelText   $csharpLabel

Zorluğu Anlamak

Blazor Server uygulamaları sunucu tarafındaki C# kodundan doğrudan tarayıcı sekmelerini düzenleyemez. Blazor'da yeni pencerede PDF açma görevi, sunucu tarafı PDF oluşturma ile istemci tarafı pencere yönetimini birleştirmek için JavaScript InterOp (JS interop) gerektirir.

IronPDF, geliştiricilerin sunucuda yüksek kalitede PDF belgeleri oluşturmasını sağlıyor, bu belgeler ardından JavaScript'in window.open() işlevi kullanılarak görüntülenebilir. Bu yaklaşım, bir net uygulamasında yaygın çözüm isteyen bir istemci-sunucu sorununu çözmek anlamına gelir.

Blazor Web Uygulamanızda JavaScript İşlevlerini Uygulamak

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

<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 işlevi, sunucudan yeni bir sekme açma sorununu çözmek için önemlidir. Blazor sunucusundan bir Base64 dizesi olarak PDF verilerini kabul eder ve istemci tarafı kod, bunu bir ikili Blob nesnesine dönüştürür.

Bu blob daha sonra geçici bir URL oluşturmak için kullanılır ve bu URL son olarak window.open(blobUrl, '_blank') ile tarayıcıyı yeni bir sekmede PDF açmaya zorlar.

Blazor Bileşeni Oluşturma

PDF'ler oluşturan ve yeni sekmelerde açan yeni bir Razor bileşeni oluşturun. Bu, çözüm için ana şablon görevi görür:

@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

Bu kod bloğu ana etkileşimli sayfayı tanımlar. Razor işaretlemesi, bir 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ının sağladığı URL'den PDF oluşturmak için bir ChromePdfRenderer örneği kullanır.

Daha sonra, ortaya çıkan PDF bayt dizisini bir Base64 dizesine dönüştürür ve belgeyi kullanıcıya açmak için JavaScript işlevini çağırmak üzere @inject IJSRuntime JS kullanır.

Kullanıcı Arayüzü Çıkışı

IronPDF ile yeni sekmede PDF açma: Bir Geliştırici Eğitimi: Görüntü 1 - Temel UI örneği

Yeni Sekmede PDF Açılmış Çıktı

IronPDF ile yeni sekmede PDF açma: Bir Geliştirici Eğitimi: Görüntü 2 - Yeni sekmede ilk açılan PDF

Dinamik HTML İçeriğiyle Çalışma

URL yerine dinamik içerikten PDF oluşturmak için yaklaşımınızı RenderHtmlAsPdf kullanacak şekilde 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");
}
Imports System
Imports System.Threading.Tasks

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 As 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 yöntemi, IronPDF'in mevcut bir URL yerine dinamik olarak oluşturulmuş HTML işaretlemesinden bir PDF nasıl oluşturabileceğini gösterir. Bir başlık, içerik ve dinamik veri içeren tam bir HTML dizesi oluşturur. Dinamik içerik oluşturmanın cevabı RenderHtmlAsPdf yöntemidir.

Güncellenmiş Blazor Server Kullanıcı Arayüzü

IronPDF ile yeni sekmede PDF açma: Bir Geliştirici Eğitimi: Görüntü 3 - Sunucu projeniz için güncellenmiş örnek UI

Yeni Tarayıcı Sekmesinde Açılmış PDF

IronPDF ile yeni sekmede PDF açma: Bir Geliştirici Eğitimi: Görüntü 4 - Oluşturulan ve ardından yeni bir sekmede açılan dinamik PDF örneği

Yaygın Sorunlarla Baş Etmek

Tarayıcılar Arası Uyumluluk

Farklı tarayıcılar blob URL'lerini farklı şekilde işler. Tutarlı bir davranış sağlamak için uygulamanızı Chrome, Firefox, Edge ve Safari üzerinde test edin.

Büyük Dosyalar

Büyük PDF belgeleri için performansı artırmak amacıyla sunucu tarafında önbellekleme olanağı düşünün:

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

Gezinme Alternatifleri

JavaScript interop dışında, statik dosya ara yazılımı aracılığıyla PDF'leri sunabilir ve alternatif bir gezintite kapısı olarak 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>
The provided input is HTML, not C# code. Please provide valid C# code for conversion to VB.NET.
$vbLabelText   $csharpLabel

Bu yaklaşım önceden oluşturulmuş PDF'lerde 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 olduğunda kullanıcılara anlamlı hata mesajları verin.
  2. Performans: PDF oluşturulması sırasında UI'nizi engellememek için async/await modellerini kullanın.
  3. Kullanıcı Deneyimi: Oluşum sırasında yükleme göstergelerini gösterin ve açılır pencere engelleyici senaryolarını zarif bir şekilde ele alın.
  4. DOM Manipülasyonu: Sunucudaki C#'ın, istemcinin DOM'unu doğrudan manipüle edemeyeceğini unutmayın; bu nedenle JS InterOp şarttır. Tarayıcının PDF görüntüleyicisini yönettiği için yeni pencerenin yüksekliğini veya genişliğini manuel olarak ayarlamanıza gerek yok.
  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çmak için sağlam bir çözüm sunar. Bu yaklaşım, Microsoft tarafından .NET teknolojisi üzerine kurulan modern Blazor uygulamalarıyla sorunsuz bir şekilde entegre olan dinamik, profesyonel PDF belgeleri oluşturmayı geliştiricilere olanak tanır.

Blazor projenizde PDF işlevselliğini uygulamaya hazır mısınız? Ücretsiz IronPDF denemenize bugün başlayın. Deneme, başarıya ulaşmanızı sağlamak için eksiksiz işlevsellik, filigranlar olmadan ve kapsamlı destek içerir.

Sıkça Sorulan Sorular

Blazor kullanarak bir PDF'yi yeni bir sekmede nasıl açabilirim?

PDF'yi IronPDF ile oluşturarak ve JavaScript interop'u kullanarak yeni bir sekmede görüntüleyerek Blazor kullanarak bir PDF'yi yeni bir sekmede açabilirsiniz. Bu yaklaşım, belgeleri görüntülerken kullanıcı deneyiminin sorunsuz olmasını sağlar.

Blazor'da JavaScript interop nedir?

Blazor'da JavaScript interop, Blazor uygulamalarının .NET kodundan JavaScript işlevlerini çağırmasına ve tersine izin verir. Bu, özellikle yeni bir sekmede PDF açma gibi tarayıcıya özgü işlemlerin JavaScript tarafından ele alınabileceği görevler için kullanışlıdır.

Blazor'da PDF oluşturmak için neden IronPDF'i kullanmalıyım?

IronPDF, Blazor uygulamalarında PDF oluşturmak için verimli bir araçtır. Belge yönetimini artıran JavaScript interop ile kolayca entegre edilebilecek kesintisiz PDF oluşturma ve manipülasyonuna olanak tanıyan sağlam özellikler sunar.

IronPDF, Blazor Sunucu ile uyumlu mu?

Evet, IronPDF Blazor Sunucu ile tamamen uyumludur. Oluşturulmuş PDF'leri JavaScript interop ile yeni sekmelerde açmak için kullanılabilir.

Blazor uygulamalarında PDF'leri yeni bir sekmede açmanın faydaları nelerdir?

PDF'leri yeni bir sekmede açmak, kullanıcıların belgeleri mevcut sayfadan ayrılmadan görüntülemelerini sağlayarak kullanıcı deneyimini artırır. Bu yöntem, IronPDF ve JavaScript interop tarafından desteklenir ve daha etkileşimli ve kesintisiz bir gezinme oturumu sağlar.

Curtis Chau
Teknik Yazar

Curtis Chau, Bilgisayar Bilimleri alanında Lisans Derecesine (Carleton Üniversitesi) sahip ve Node.js, TypeScript, JavaScript ve React konularında uzmanlaşmış ön uç geliştirmeyle ilgileniyor. Sezgisel ve estetik açıdan hoş kullanıcı arayüzleri oluşturma tutkunu, Curtis modern çerçevelerle çalışmayı ve iyi yapı...

Daha Fazla Oku

Iron Destek Ekibi

Haftada 5 gün, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara