Ouvrir des documents PDF dans un nouvel onglet du navigateur est une exigence courante pour les applications web Blazor. Ce tutoriel montre comment générer des PDF à l'aide d'IronPDF et les afficher dans de nouveaux onglets à l'aide de l'interopérabilité JavaScript, offrant ainsi aux utilisateurs une expérience de visualisation de documents transparente. Cet exemple se concentre sur une version Blazor Server.
Commencez par créer un nouveau projet Blazor Server dans Visual Studio 2022. Installez IronPDF via la console du gestionnaire de packages NuGet :
Configurez votre licence IronPDF dans Program.cs pour activer toutes les fonctionnalités :
License.LicenseKey = "YOUR-LICENSE-KEY";License.LicenseKey = "YOUR-LICENSE-KEY"Les applications Blazor Server ne peuvent pas manipuler directement les onglets du navigateur depuis le code C# sur le serveur. La tâche de Blazor ouvrir le PDF dans un nouvel onglet nécessite une interopération JavaScript (JS interop) pour faire le lien entre la génération de PDF côté serveur et la gestion des fenêtres côté client.
IronPDF permet aux développeurs de générer des documents PDF de haute qualité sur le serveur, qui peuvent ensuite être affichés en utilisant la fonctionnalité window.open() de JavaScript. Cette approche consiste à résoudre un problème client-serveur courant dans une application .NET.
Ajoutez ce code JavaScript à votre fichier _Host.cshtml pour gérer l'affichage des PDF dans les nouveaux onglets du navigateur. Voici le module responsable de la gestion des fenêtres côté client :
<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.La fonction JavaScript window.openPdfInNewTab est essentielle pour résoudre le défi d'ouvrir un nouvel onglet depuis le serveur. Elle accepte les données PDF sous forme de chaîne Base64 du serveur Blazor, et le code côté client les convertit en un objet Blob binaire.
Ce blob est ensuite utilisé pour créer une URL temporaire, qui est finalement transmise à window.open(blobUrl, '_blank') pour forcer le navigateur à ouvrir le PDF dans un nouvel onglet.
Créez un nouveau composant Razor qui génère des PDFs et les ouvre dans de nouveaux onglets. Ceci sert de modèle principal pour la solution :
@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 CodeCe bloc de code définit la page interactive principale. Le balisage Razor crée une interface utilisateur simple avec un champ d'entrée d'URL et un bouton. Le bloc @code C# gère la logique : lorsque le bouton est cliqué, il utilise une instance ChromePdfRenderer pour générer le PDF à partir de l'URL fournie par l'utilisateur.
Elle convertit ensuite le tableau d'octets PDF résultant en une chaîne Base64 et utilise @inject IJSRuntime JS pour appeler la fonction JavaScript, ouvrant ainsi le document pour l'utilisateur.
Pour générer des PDF à partir de contenu dynamique au lieu des URL, modifiez votre approche pour utiliser 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");
}La méthode GenerateFromHtml démontre comment IronPDF peut générer un PDF à partir d'un balisage HTML généré dynamiquement au lieu d'une URL existante. Elle construit une chaîne HTML complète contenant un en-tête, du contenu et des données dynamiques. La solution pour la génération de contenu dynamique est la méthode RenderHtmlAsPdf.
Différents navigateurs gèrent les URLs blob différemment. Testez votre mise en œuvre sur Chrome, Firefox, Edge et Safari pour garantir un comportement cohérent.
Pour les documents PDF de grande taille, envisagez de mettre en place un cache côté serveur pour améliorer les performances :
services.AddMemoryCache();
// Cache generated PDFs to avoid regenerationservices.AddMemoryCache()
' Cache generated PDFs to avoid regenerationOutre l'interopérabilité JavaScript, vous pouvez servir des PDFs via un middleware de fichiers statiques et utiliser des balises d'ancre HTML standard comme option alternative de navigation :
<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.Cette approche fonctionne bien pour les PDF pré-générés mais n'offre pas les capacités de génération dynamique de la méthode JS InterOp.
La combinaison des puissantes capacités de génération de PDF d'IronPDF avec l'interopérabilité JavaScript de Blazor fournit une solution robuste pour l'ouverture de PDF dans de nouveaux onglets de navigateur. Cette approche permet aux développeurs de créer des documents PDF dynamiques et professionnels qui s'intègrent parfaitement aux applications Blazor modernes construites sur la technologie .NET de Microsoft.
Prêt à mettre en œuvre la fonctionnalité PDF dans votre projet Blazor ? Démarrez votre essai gratuit d'IronPDF dès aujourd'hui. L'essai comprend toutes les fonctionnalités sans filigranes et un support complet pour assurer votre réussite.
Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes et créer des manuels bien structurés et visuellement attrayants.
IronPDF fait partie de IRONSUITE
10 API .NET pour vos documents
Lorsque vous avez besoin que votre PDF ressemble à HTML, rapidement.
