Abrir documentos PDF em uma nova aba do navegador é um requisito comum para aplicações web Blazor . Este tutorial demonstra como gerar PDFs usando o IronPDF e exibi-los em novas abas utilizando a interoperabilidade com JavaScript , proporcionando aos usuários uma experiência de visualização de documentos perfeita. Este exemplo se concentra na versão Blazor Server.
Comece criando um novo projeto Blazor Server no Visual Studio 2022. Instale o IronPDF através do Console do Gerenciador de Pacotes NuGet :
Configure sua licença do IronPDF no arquivo Program.cs para habilitar todas as funcionalidades:
License.LicenseKey = "YOUR-LICENSE-KEY";License.LicenseKey = "YOUR-LICENSE-KEY"Os aplicativos Blazor Server não podem manipular diretamente as abas do navegador a partir do código C# no servidor. A tarefa de abrir um PDF em uma nova aba no Blazor requer o JavaScript InterOp (JS interop) para fazer a ponte entre a geração de PDFs no servidor e o gerenciamento de janelas no lado do cliente.
IronPDF permite que os desenvolvedores gerem documentos PDF de alta qualidade no servidor, que podem ser exibidos usando a funcionalidade window.open() do JavaScript. Essa abordagem significa resolver um problema comum de cliente-servidor em uma aplicação de rede.
Adicione este código JavaScript ao seu arquivo _Host.cshtml para gerenciar a exibição de PDFs em novas abas do navegador. Este é o módulo responsável pelo gerenciamento de janelas do lado do cliente:
<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.A função JavaScript window.openPdfInNewTab é crucial para resolver o desafio de abrir uma nova aba a partir do servidor. Ela aceita os dados do PDF como uma string Base64 do servidor Blazor e o código do lado do cliente o converte em um objeto Blob binário.
Esse blob é então usado para criar uma URL temporária, que é finalmente passada para window.open (blobUrl, '_blank') para forçar o navegador a abrir o PDF em uma nova aba.
Crie um novo componente Razor que gere PDFs e os abra em novas abas. Isso serve como modelo principal para a solução:
@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 CodeEste bloco de código define a página interativa principal. A linguagem de marcação Razor cria uma interface de usuário simples com um campo de entrada de URL e um botão. O bloco de código C# @code lida com a lógica: quando o botão é clicado, ele usa uma instância de ChromePdfRenderer para gerar o PDF a partir da URL fornecida pelo usuário.
Em seguida, converte a matriz de bytes do PDF resultante em uma string Base64 e usa @inject IJSRuntime JS para chamar a função JavaScript, abrindo o documento para o usuário.
Para gerar PDFs de conteúdo dinâmico em vez de URLs, modifique sua abordagem para usar 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");
}O método GenerateFromHtml demonstra como o IronPDF pode gerar um PDF a partir de marcação HTML gerada dinamicamente em vez de uma URL existente. Constrói uma string HTML completa contendo um cabeçalho, conteúdo e dados dinâmicos. A resposta para a geração de conteúdo dinâmico é o método RenderHtmlAsPdf.
Diferentes navegadores lidam com URLs de blobs de maneiras diferentes. Teste sua implementação no Chrome, Firefox, Edge e Safari para garantir um comportamento consistente.
Para documentos PDF grandes, considere implementar o cache no servidor para melhorar o desempenho:
services.AddMemoryCache();
// Cache generated PDFs to avoid regenerationservices.AddMemoryCache()
' Cache generated PDFs to avoid regenerationAlém da interoperabilidade com JavaScript , você pode disponibilizar PDFs por meio de middleware de arquivos estáticos e usar tags de âncora HTML padrão como opção alternativa de navegação:
<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.Essa abordagem funciona bem para PDFs pré-gerados, mas não possui os recursos de geração dinâmica do método JS InterOp.
A combinação dos poderosos recursos de geração de PDF do IronPDF com a interoperabilidade JavaScript do Blazor oferece uma solução robusta para abrir PDFs em novas abas do navegador. Essa abordagem permite que os desenvolvedores criem documentos PDF dinâmicos e profissionais que se integram perfeitamente com aplicativos Blazor modernos, desenvolvidos com a tecnologia .NET da Microsoft.
Pronto para implementar a funcionalidade de PDF no seu projeto Blazor ? Comece hoje mesmo seu teste gratuito do IronPDF . A versão de avaliação inclui todas as funcionalidades sem marcas d'água e suporte completo para garantir o seu sucesso.
Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.
IronPDF faz parte do IRON SUITE.
10 produtos de API .NET para seus documentos de escritório
Quando você precisa que seu PDF tenha a aparência de HTML, rapidamente.
